.react-pdf__Page { transform-origin: left top; position: absolute; top: 0; left: 0; } .react-pdf__Page__textContent span { user-select: text; } .react-pdf__Document { position: absolute; } .pdfBox-buttonTray { position: absolute; top: 0; left: 0; z-index: 25; pointer-events: all; } .pdfBox-thumbnail { position: absolute; width: 100%; } .pdfButton { pointer-events: all; width: 100px; height: 100px; } .pdfBox-cont, .pdfBox-cont-interactive { display: flex; flex-direction: row; height: 100%; overflow-y: scroll; overflow-x: hidden; } .pdfBox-cont { pointer-events: none; .textlayer { pointer-events: none; span { pointer-events: none !important; } } .page-cont { pointer-events: none; } } .pdfBox-cont-interactive { pointer-events: all; display: flex; flex-direction: row; .textlayer { span { pointer-events: all !important; user-select: text; } } } .pdfBox-contentContainer { position: absolute; transform-origin: left top; } .pdfBox-settingsCont { position: absolute; right: 0; top: 0; .pdfBox-settingsButton { border-bottom-left-radius: 50%; display: flex; justify-content: space-evenly; align-items: center; height: 70px; background: none; padding: 0; .pdfBox-settingsButton-arrow { width: 0; height: 0; border-top: 25px solid transparent; border-bottom: 25px solid transparent; border-right: 25px solid #121721; transition: all 0.5s; } .pdfBox-settingsButton-iconCont { background: #121721; height: 50px; width: 70px; display: flex; justify-content: center; align-items: center; margin-left: -2px; border-radius: 3px; } } .pdfBox-settingsButton:hover { background: none; } .pdfBox-settingsFlyout { width: 600px; position: absolute; background: #323232; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25); left: -400px; border-radius: 7px; padding: 20px; display: flex; flex-direction: column; font-size: 30px; transition: all 0.5s; .pdfBox-settingsFlyout-title { color: white; } .pdfBox-settingsFlyout-kvpInput { margin-top: 20px; display: grid; grid-template-columns: 47.5% 5% 47.5%; } } }