.pdf-viewer { display: flex; flex-direction: column; height: 100%; position: relative; width: 100%; .page-container { display: flex; flex-grow: 1; overflow: auto; padding: 1em; position: relative; width: 100%; .layers-container { margin: 0 auto; position: relative; } } .pdf-toolbar { align-items: center; background: $color-concrete; display: inline-flex; flex-wrap: wrap; justify-content: center; padding: .5em; width: 100%; .page-counter { padding: 0 .25em; width: auto; } .current-page { margin-right: .25em; max-width: 3em; } .total-page { margin-left: .25em; } .divider { background: $color-alto; height: 2em; margin: 0 1em; width: 2px; } .zoom-page { margin-right: .5em; width: 10em; } .btn:disabled { background: $color-concrete; } } .blocked-screen { align-items: center; color: $color-white; display: none; height: 100%; justify-content: center; position: absolute; width: 100%; .title { @include font-h1; } .description { @include font-main; margin-bottom: 2em; } .image { background: unset; margin-bottom: 2em; } } &.blocked { .pdf-toolbar { display: none; } .blocked-screen { display: flex; flex-direction: column; } } }