html {
    height: 100%;

    /* minimum spacing around "window" */
    /* Feel free to use relative units, for larger gap on larger screens */
    padding: 15px;
    box-sizing: border-box;

    /* position the "window" */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* Use this instead if you want to center the window vertically */
    /*justify-content: center;*/

    /* 
        We need to explicitly set an overflow value (other than auto?) so that overflow on body is not treated as applied to this element
        
        That's just a weird quirk of the CSS spec 
    */
    overflow: hidden;

    /* 
        We MUST set a background color other than transparent, or body background-color (which is probably solid) will be treated as if applied to this element 

        That's just a weird quirk of the CSS spec

        use a completely transparent 1x1 GIF, encoded as data uri
    */
    background: url("data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==");
}
body {
    margin: 0 !important;

    /*
        Feel free to override any of these
    */
    border: 1px solid #555;
    border-radius: 5px;
    box-shadow: 0 0 10px 5px #555;
    background-color: white;

    /*
        You need to set an "initial" width.
        Can use absolute or relative units.
        This is more like a max width - the width will shrink as necessary on small screens.
    */
    width: 700px;
    max-width: 100%; 
    height: auto;
    box-sizing: border-box;
    overflow: auto;

    /*
        You could add top/bottom padding, too, but we prefer to set top/bottom margin on child elements
        
        Be sure to update AlertModalBreakOut when updating horizontal padding
    */
    padding: 0 1rem;
}

/* 
    Utility class that you can set on a direct child of body, 
    so that it renders "right to the edges" of the alert window
*/
.AlertModalBreakOut {
    margin-left: -1rem;
    margin-right: -1rem;
}

/*
    Animation styles
    Note - keyframes at 100% _shouldn't_ be needed if they're the same as the "default" values, but we've run into weird browser behaviour where animations sometimes break if they aren't set. Best to always set them explicitly.
*/
@keyframes SimpleModal-fade-in {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes SimpleModal-explode {
    0% {transform: scale(0);}
    100% {transform: none;}
}
@keyframes SimpleModal-slide-down {
    0% {transform: translateY(-100%);}
    100% {transform: none;}
}
html, body, html:before {
    animation-duration: 0.3s;
    animation-timing-function: ease-in;
}
.SimpleModal-animating:before {
    animation-name: SimpleModal-fade-in;
}
.SimpleModal-animating body {
    animation-name: SimpleModal-explode;
}
.SimpleModal-closing:before, .SimpleModal-closing body {
    animation-direction: reverse;
    /* make sure the offscreen state persists while window is closed */
    animation-fill-mode: forwards;
}

/* 
    mobile style 

    Turn off border radius, and top/left/right "gaps" between body and viewport.

    You might also want to force body height to 100%, but we've left it dynamic.

    You can change this behaviour, change the breakpoint, or drop this entirely.
*/
@media (max-width: 900px) {
    html {
        padding: 0;
    }
    body {
        width: 100%;
        border-radius: 0;
        border: none;
        outline: 5px solid #555;
    }
    .SimpleModal-animating body {
        animation-name: SimpleModal-slide-down;
    }
}


/*
    Sticky header and footer.
    Adapted from RLCS.

    .overflows-top and .overflows-bottom are set/updated automatically in base.js
    Search for overflow-detector
*/
.AlertWindowStickyHeader {
    padding: 1rem;
    margin-left: -1rem;
    margin-right: -1rem;
    margin-top: 0;
    transition: box-shadow 0.15s linear;
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 1;
}
.overflows-top .AlertWindowStickyHeader {
    box-shadow: 0 0 10px 5px #888;
}
.AlertWindowStickyFooter {
    position: sticky;
    bottom: 0;
    z-index: 2147483647;
    display: block;
    margin: 0 -1rem;
    transition: box-shadow 0.15s linear;
    background-color: white;
}
.AlertWindowStickyFooter {
    margin-top: 1rem;
}
.overflows-bottom .AlertWindowStickyFooter {
    box-shadow: 0 0 10px 5px #888;
}