.file-previewer-container {
    z-index: 5000 !important;
    div.file-previewer {
        display: grid;
        justify-content: center;
        grid-template-areas:
            "header"
            "content"
            "footer";
        grid-template-rows: 50px auto 70px;
        width: 100vw;
        height: 100vh;
        justify-items: center;
        align-items: center;
        > .file-previewer__header {
            grid-area: header;
            > .file-previewer__header__close-button {
                position: absolute;
                top: 5px;
                right: 5px;
                ui-icon {
                    color: var(--white, $white);
                }
            }
            > .file-previewer__header__file-name {
                display: flex;
                justify-content: center;
                font-weight: 400;
                font-size: 16px;
                line-height: 24px;
                color: $white;
                padding: 20px 0px;
            }
        }
        > .file-previewer__content {
            width: 100vw;
            display: grid;
            grid-template-areas: "left center right";
            grid-template-columns: 100px auto 100px;
            column-gap: 50px;
            justify-items: center;
            align-items: center;
            height: 100%;
            > .file-previewer__content__iframe {
                grid-area: center;
                width: 100%;
                height: 100%;
                > .preview-file-img {
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    > img {
                        background-color: var(--white, $white);
                        max-width: 100%;
                        max-height: calc(100vh - 120px);
                        width: auto;
                    }
                }
                > .preview-file-frame {
                    width: 100%;
                    height: inherit;
                }
                > div.lds-ring {
                    background-color: $base-bg;
                    height: 100%;
                }
            }
            > .preview-file__content__not-supported {
                background-color: var(--white, $white);
                display: flex;
                flex-direction: column;
                align-items: center;
                border-radius: 6px;
                grid-area: center;
                height: fit-content;
                width: fit-content;

                > ui-icon {
                    padding: 30px;
                }
                > .preview-file__content__not-supported__title {
                    font-size: 38px;
                    padding: 10px 100px;
                }
                > .preview-file__content__not-supported__subtitle {
                    font-size: 24px;
                    padding: 0 100px;
                    padding-bottom: 50px;
                    color: var(--gray, $gray);
                }
            }
        }

        > div.file-previewer__download-button {
            grid-area: footer;
            > ui-button {
                margin: 30px 0px;
            }
        }
    }
}
