<div
    id="redirect"
    class="window"
    style="position: absolute; left: 12%; top: 22%; display: none; width: 30%;"
    data-redirectUrl="test"
>
    <div id="redirectheader" class="title-bar">
        <div class="title-bar-text">Redirect</div>
        <div class="title-bar-controls">
            <button class="close" aria-label="Minimize" style="background-color: silver;"></button>
            <button class="close" aria-label="Close" style="background-color: silver;"></button>
        </div>
    </div>
    <div class="window-body">
        <!-- prettier-ignore -->
        <h2 style="margin-bottom: 10px; font-size: 22px;">You are about to be redirected to</h2>
        <section class="field-row" style="justify-content: flex-end">
            <button id="okButton" style="margin-top: 0;">OK</button>
            <button class="close" style="margin-top: 0;">Cancel</button>
        </section>
    </div>
</div>

<style>
    @media (max-width: 540px) {
        #redirect {
            width: 80% !important;	
        }
    }

    @media (max-width: 1080px) and (min-width: 540px) {
        #redirect {
            width: 60% !important;
        }
    }
</style>