/* StoneGate shared Site.Master frame, R29 revision 2.
   Load once at the end of the master page's head, after HeadContent.
   Change these variables here to adjust the common desktop frame. */
:root {
    --sgp-frame-width:1400px;
    --sgp-frame-outer:1rem;
    --sgp-frame-inner:15px;
}

/* The navigation and main content use identical outer and inner gutters. */
#mainNav {
    padding-left:var(--sgp-frame-outer) !important;
    padding-right:var(--sgp-frame-outer) !important;
}
#mainNav > .container,
#mainNav > .container-fluid {
    box-sizing:border-box;
    width:100% !important;
    max-width:var(--sgp-frame-width) !important;
    margin-left:auto;
    margin-right:auto;
    padding-left:var(--sgp-frame-inner) !important;
    padding-right:var(--sgp-frame-inner) !important;
}
.content-root {
    box-sizing:border-box;
    width:100%;
    max-width:none;
    padding-left:var(--sgp-frame-outer) !important;
    padding-right:var(--sgp-frame-outer) !important;
}
#mainWrapper {
    box-sizing:border-box;
    width:100% !important;
    min-width:0;
    max-width:var(--sgp-frame-width) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:var(--sgp-frame-inner) !important;
    padding-right:var(--sgp-frame-inner) !important;
}
#siteHeader,
.footer > .container {
    box-sizing:border-box;
    width:calc(100% - var(--sgp-frame-outer) - var(--sgp-frame-outer));
    max-width:var(--sgp-frame-width);
    margin-left:auto;
    margin-right:auto;
    padding-left:var(--sgp-frame-inner);
    padding-right:var(--sgp-frame-inner);
}

/* Remove a second Bootstrap frame when a content page supplies its own.
   Nested columns, cards, reading text, modal dialogs and form controls keep
   their own sizes. These rules are for outer page wrappers only. */
#mainWrapper > .container,
#mainWrapper > .container-fluid,
#mainWrapper > .body-content,
#mainWrapper .sg-royalties,
#mainWrapper .sg-trad,
#mainWrapper .sg-project,
#mainWrapper .sg-agreements,
#mainWrapper .sg-costs {
    box-sizing:border-box;
    width:100% !important;
    min-width:0;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
}

/* Keep the same alignment while leaving more room for phone-width content. */
@media (max-width:600px) {
    :root {
        --sgp-frame-outer:.5rem;
        --sgp-frame-inner:8px;
    }
}
@media print {
    .content-root,
    #mainWrapper {
        width:100% !important;
        max-width:none !important;
        margin-left:0 !important;
        margin-right:0 !important;
        padding-left:0 !important;
        padding-right:0 !important;
    }
}