/* ==========================================================================
   V.S.C. bv - responsive layer.

   The original design is a fixed 970px wide table layout from ~2010. This
   file leaves that untouched on desktop and only takes over below 1010px:
   the container becomes fluid, images and tables stop overflowing, the panes
   stack. Under 780px, or on a touchscreen, navigation opens only on tap.

   Desktop mouse navigation keeps the original appearance and hover behavior.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Defaults.
   These must come BEFORE the media queries: they have the same specificity,
   so if they came afterwards they would win at every width and the menu
   button would stay hidden on phones too.
   -------------------------------------------------------------------------- */
#vscMenuToggle { display: none; }
.vsc-mobile-nav { display: none; }

/* nothing may make the document wider than the screen */
html, body { max-width: 100%; }

/* --------------------------------------------------------------------------
   1. Fluid container (below the original 970px design width)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1010px) {

    #s_wrap_main { display: block; width: auto; max-width: 970px; margin: 0 auto; }
    #s_wrap_sub  { display: block; }
    .template_style { display: block; }

    /* the pane table: let it fill the width instead of sizing to its content */
    .content_width > table { width: 100%; table-layout: auto; }

    /* nothing in the content may push the page wider than the screen */
    .content_width img,
    .content_width iframe,
    .content_width embed,
    .content_width object { max-width: 100%; height: auto; }

    /* keep iframes (Google Calendar) usable rather than squashed */
    .content_width iframe { width: 100%; }

    /* wide data tables inside the text scroll on their own */
    .DNNModuleContent table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* long unbroken words / urls must not stretch the layout */
    .DNNModuleContent { overflow-wrap: break-word; word-wrap: break-word; }
}

/* --------------------------------------------------------------------------
   2. Tablet: stack the content panes
   -------------------------------------------------------------------------- */
@media screen and (max-width: 900px) {

    .content_width > table,
    .content_width > table > tbody,
    .content_width > table > tbody > tr { display: block; width: 100%; }

    .content_width > table > tbody > tr > td {
        display: block;
        width: auto !important;
        padding-left: 0;
        padding-right: 0;
    }

    /* the empty Left/Right panes must not add blank space */
    .content_width > table > tbody > tr > td.DNNEmptyPane { display: none; }

    .content_pad { padding: 10px 14px 0 14px; margin: 0 10px 0 6px; }
    .lm_content_pad { padding: 0 14px 0 0; margin: 0 10px 0 6px; }
}

/* --------------------------------------------------------------------------
   3. Phone: tap-to-open menu, full width search, tighter chrome
   -------------------------------------------------------------------------- */
@media screen and (max-width: 780px) {

    /* --- the decorative frame keeps its look but stops eating the width --- */
    .logo_pad  { margin: 0 8px 0 4px; padding-bottom: 8px; }
    .menu_bg   { margin: 0 8px 0 4px; padding-left: 0; }
    .bread_bg  { margin: 0 8px 0 4px; height: auto; min-height: 34px; }
    .content_pad, .lm_content_pad { margin: 0 8px 0 4px; padding: 10px 12px 0 12px; }
    .bot_right { padding: 0 16px; }
    .top_space { height: 12px; }

    .s_logo img { max-width: 100%; height: auto; }
    .lang_pad { padding: 7px 8px 0 8px; }

    /* --- search: own row, full width --- */
    .search_style { float: none; height: auto; width: 100%; }
    .search_bg { padding: 8px 0 8px 0; }
    #vscSearch .SearchBorder { width: auto; float: none; overflow: hidden; }
    #vscSearch input.SearchTextBox { width: calc(100% - 80px); }
    #vscSearch .vsc-search-go { float: right; padding: 0 6px; }

    /* --- breadcrumb / footer --- */
    #bread_style { float: none; line-height: 1.5em; padding: 8px 12px; }
    #login_style { display: none; }
    .bot_pad { padding: 0 12px; }
    #terms_style, #copy_style { float: none; display: block; text-align: center; padding: 2px 0; }

    .vsc-searchbox-big input[type=text] { width: 100%; margin-bottom: 6px; }
    .vsc-searchbox-big button { margin-left: 0; }
    .vsc-contact dt { float: none; width: auto; }
    .vsc-contact dd { margin-left: 0; margin-bottom: 10px; }
}

/* One category per screen on phones and touchscreens.
   Keep this media query in sync with vsc-responsive.js. */
@media screen and (max-width: 780px), screen and (hover: none), screen and (pointer: coarse) {
    #vscMenu.vsc-mobile-ready { display: none; }
    #vscMenuToggle {
        display: block;
        box-sizing: border-box;
        width: 100%;
        min-height: 52px;
        margin: 0;
        padding: 14px 20px;
        border: 0;
        border-radius: 8px;
        background: #4e6cb5;
        color: #fff;
        font: 700 16px/1.4 Verdana, Arial, sans-serif;
        text-align: left;
        cursor: pointer;
        touch-action: manipulation;
    }
    .vsc-mobile-nav[open] {
        display: flex;
        flex-direction: column;
        position: fixed;
        inset: 0;
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        height: 100%;
        height: 100dvh;
        max-height: none;
        margin: 0;
        padding: 0;
        border: 0;
        background: #fff;
        color: #243645;
        font: 15px/1.5 Verdana, Arial, sans-serif;
        text-align: left;
        overflow: hidden;
    }
    .vsc-mobile-nav::backdrop { background: rgba(20, 32, 44, .5); }
    .vsc-mobile-nav *, .vsc-mobile-nav *::before, .vsc-mobile-nav *::after { box-sizing: border-box; }
    .vsc-mobile-nav [hidden] { display: none; }
    .vsc-mobile-nav button, .vsc-mobile-nav a {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    .vsc-mobile-nav .vsc-nav-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        flex-shrink: 0;
        padding: max(14px, env(safe-area-inset-top)) 20px 14px;
        border-bottom: 1px solid #e2e7eb;
        background: #f7f9fa;
    }
    .vsc-mobile-nav .vsc-nav-brand {
        color: #5f7abc;
        font-size: 23px;
        font-weight: 700;
        letter-spacing: -.6px;
        line-height: 1.2;
    }
    .vsc-mobile-nav .vsc-nav-brand span {
        display: block;
        margin-top: 4px;
        color: #60717e;
        font-size: 11px;
        font-weight: 400;
        letter-spacing: .4px;
    }
    .vsc-mobile-nav .vsc-nav-close,
    .vsc-mobile-nav .vsc-nav-back,
    .vsc-mobile-nav .vsc-nav-home {
        min-height: 44px;
        padding: 10px 14px;
        border: 1px solid #d4dce2;
        border-radius: 7px;
        background: #fff;
        color: #243645;
        font: 700 13px/1.4 Verdana, Arial, sans-serif;
        cursor: pointer;
    }
    .vsc-mobile-nav .vsc-nav-content {
        flex: 1;
        min-height: 0;
        padding: 24px 20px max(24px, env(safe-area-inset-bottom));
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    .vsc-mobile-nav .vsc-nav-toolbar:not([hidden]) {
        display: flex;
        flex-shrink: 0;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px;
        margin: 0;
        padding: 12px 20px;
        border-bottom: 1px solid #e2e7eb;
        background: #fff;
    }
    .vsc-mobile-nav .vsc-nav-home { border-color: transparent; color: #586c7b; }
    .vsc-mobile-nav .vsc-nav-path {
        margin: 0 0 8px;
        color: #657783;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .6px;
        text-transform: uppercase;
        overflow-wrap: anywhere;
    }
    .vsc-mobile-nav .vsc-nav-title {
        margin: 0;
        padding: 0;
        color: #243645;
        font: 700 27px/1.25 Verdana, Arial, sans-serif;
        letter-spacing: -.8px;
        overflow-wrap: anywhere;
    }
    .vsc-mobile-nav .vsc-nav-title:focus { outline: none; }
    .vsc-mobile-nav .vsc-nav-description {
        margin: 10px 0 24px;
        color: #657783;
        font-size: 13px;
        line-height: 1.5;
    }
    .vsc-mobile-nav .vsc-nav-page {
        display: block;
        margin-bottom: 24px;
        padding: 16px 18px;
        border: 1px solid #4e6cb5;
        border-radius: 9px;
        background: #4e6cb5;
        color: #fff;
        text-decoration: none;
        overflow-wrap: anywhere;
    }
    .vsc-mobile-nav .vsc-nav-page-caption { display: block; font-size: 12px; }
    .vsc-mobile-nav .vsc-nav-page-name { display: block; margin-top: 4px; font-size: 16px; font-weight: 700; }
    .vsc-mobile-nav .vsc-nav-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #e2e7eb; }
    .vsc-mobile-nav .vsc-nav-list > li { list-style: none; margin: 0; padding: 0; }
    .vsc-mobile-nav .vsc-nav-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        width: 100%;
        min-height: 64px;
        margin: 0;
        padding: 17px 4px;
        border: 0;
        border-bottom: 1px solid #e2e7eb;
        border-radius: 0;
        background: #fff;
        color: #243645;
        font: 400 15px/1.45 Verdana, Arial, sans-serif;
        text-align: left;
        text-transform: none;
        text-decoration: none;
        cursor: pointer;
    }
    .vsc-mobile-nav .vsc-nav-label { min-width: 0; overflow-wrap: anywhere; }
    .vsc-mobile-nav .vsc-nav-name { display: block; font-size: 15px; font-weight: 700; }
    .vsc-mobile-nav .vsc-nav-detail { display: block; margin-top: 4px; color: #657783; font-size: 12px; }
    .vsc-mobile-nav .vsc-nav-action {
        flex-shrink: 0;
        padding: 6px 9px;
        border-radius: 5px;
        background: #f0f3f5;
        color: #4b6273;
        font-size: 11px;
        font-weight: 700;
    }
    .vsc-mobile-nav .vsc-nav-row[aria-current="page"] {
        padding-left: 12px;
        border-left: 3px solid #4e6cb5;
        background: #f1f4fb;
    }
    .vsc-mobile-nav .vsc-nav-row:active { background: #eef2f5; }
    #vscMenuToggle:focus-visible,
    .vsc-mobile-nav button:focus-visible,
    .vsc-mobile-nav a:focus-visible { outline: 3px solid #2572a3; outline-offset: -3px; }
}
/* On a wide touch display, the same menu becomes a right-side panel. */
@media screen and (min-width: 600px) {
    .vsc-mobile-nav[open] {
        left: auto;
        width: 460px;
        max-width: 100%;
        box-shadow: -12px 0 40px rgba(20, 32, 44, .18);
    }
}

/* --------------------------------------------------------------------------
   4. Very small phones
   -------------------------------------------------------------------------- */
@media screen and (max-width: 420px) {
    .content_pad, .lm_content_pad { margin: 0 4px; padding: 8px 8px 0 8px; }
    .logo_pad { margin: 0 4px; }
    .menu_bg, .bread_bg { margin: 0 4px; }
    body, th, td, table, .Normal, a:link, a:visited, a:hover { font-size: 13px; }
}