@charset "utf-8";

/* ---- Tokens ---- */
:root {
    --kc-radius: 8px;
    --kc-radius-sm: 4px;
    --kc-shadow-1: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .10);
    --kc-shadow-2: 0 4px 12px rgba(0, 0, 0, .10), 0 2px 4px rgba(0, 0, 0, .06);
    --kc-shadow-3: 0 12px 32px rgba(0, 0, 0, .16), 0 4px 8px rgba(0, 0, 0, .08);
    --kc-divider: rgba(0, 0, 0, .06);
    --kc-hover-tint: rgba(0, 0, 0, .03);
    --kc-focus: rgba(37, 160, 218, .7);
    --kc-ease: 150ms ease-in-out;
}

/* ---- Base ---- */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    transition: opacity var(--kc-ease), background-color var(--kc-ease);
}

/* Keyboard focus ring; outline (not box-shadow) so it is never removed. */
:focus-visible {
    outline: 2px solid var(--kc-focus);
    outline-offset: 1px;
}

/* ---- Page shell (masters) ---- */
/* Replaces the inline-styled wrapper div that framed every page. */
.master-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 1600px;                          /* was 1300px inline */
    margin: 0 auto;
    border: 0;                                  /* drops the old 1px grey frame (also on .master-container-responsive) */
    border-radius: var(--kc-radius) var(--kc-radius) 0 0;
    background-color: rgba(255, 255, 255, .8);  /* moved from inline */
    box-shadow: var(--kc-shadow-3);
}

.master-shell--wide {
    max-width: none;                            /* admin.Master had no max-width */
}

/* Flex items with auto side margins shrink to their content; keep them full width. */
.master-shell > .container,
.master-shell > .appfooter,
.master-shell > .appfooter-responsive {
    width: 100%;
    box-sizing: border-box;
}

/* Content grows so the footer sits at the bottom on short pages. */
.master-shell > .container {
    flex: 1 0 auto;
    border-radius: var(--kc-radius);
}

.master-header-band {
    background: url(/_styles/backgrounds/bottom.png) 0 0 repeat-x;  /* moved from inline */
    background-size: auto 100%;                                       /* moved from inline */
}

/* Legacy content panels (the only ones used in page markup). */
.one_column,
.single_container,
.opaque_bg {
    border-radius: var(--kc-radius);
    box-shadow: var(--kc-shadow-1);
}

.one_column {
    width: auto;                                /* was fixed 905px in layout.css */
    max-width: 100%;
}

/* ---- Work area headers (KidCheck/WorkAreaHeaderV3.ascx, WorkAreaHeaderV3.ascx) ---- */
.appheader-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.appheader-brand {
    flex: 0 0 190px;
}

.appheader-brand > img {
    display: block;
}

.appheader-brand--spaced > img {
    margin-bottom: 10px;                        /* moved from inline (logo cell padding) */
}

.appheader-cobrand {
    text-align: right;
    white-space: nowrap;
}

.appheader-tools {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    white-space: nowrap;
}

.appheader-tools--inset {
    padding-right: 25px;                        /* moved from inline */
}

.appheader-tip {
    align-self: stretch;
    min-width: 150px;
    min-height: 20px;
    text-align: center;
}

.appheader-tip--end {
    text-align: right;
}

.appheader-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
}

.appheader-note {
    align-self: center;
    padding-top: 5px;                           /* moved from inline */
    font-size: 11px;                            /* moved from inline */
}

.topnav-tabs {
    white-space: nowrap;
}

/* ---- Inputs ---- */
/* Radius + transition only: heights and padding stay Telerik's so arrow and
   calendar buttons stay aligned. Telerik's own focus colors are kept. */
html body .RadInput .riTextBox,
html body .RadComboBox .rcbInner,
html body input[type="text"],
html body input[type="password"],
html body input[type="email"],
html body input[type="tel"],
html body input[type="number"],
html body input[type="search"],
html body textarea {
    border-radius: var(--kc-radius-sm);
    transition: border-color var(--kc-ease), box-shadow var(--kc-ease);
}

/* Inputs joined to a button on the right: round the left side only. */
html body .RadPicker .riTextBox,
html body .RadComboBox .rcbInputCell {
    border-radius: var(--kc-radius-sm) 0 0 var(--kc-radius-sm);
}

html body .RadComboBox .rcbArrowCell {
    border-radius: 0 var(--kc-radius-sm) var(--kc-radius-sm) 0;
}

/* RadFormDecorator (DecoratedControls="all") resets radius on plain inputs at
   specificity (0,5,1) and on textareas at (0,4,1); its classes may sit on <html>,
   so these selectors skip the "html body" prefix and win by repeating classes. */
.RadForm.RadForm.rfdTextbox input.rfdDecorated.rfdDecorated[type="text"],
.RadForm.RadForm.rfdTextbox input.rfdDecorated.rfdDecorated[type="password"],
.RadForm.RadForm.rfdTextbox input.rfdDecorated.rfdDecorated[type="email"],
.RadForm.RadForm.rfdTextbox input.rfdDecorated.rfdDecorated[type="tel"],
.RadForm.RadForm.rfdTextbox input.rfdDecorated.rfdDecorated[type="number"],
.RadForm.RadForm.rfdTextbox input.rfdDecorated.rfdDecorated[type="search"],
.RadForm.RadForm.RadForm.rfdTextarea.rfdTextarea textarea {
    border-radius: var(--kc-radius-sm);
}

/* Classic-render RadComboBox draws its border on table cells; cell radius only
   shows in the separate-borders model. */
html body .RadComboBox table {
    border-collapse: separate !important;       /* beats the inline border-collapse:collapse Telerik writes */
    border-spacing: 0;
}

/* ---- Buttons ---- */
/* Grid sprite buttons (class starts with "rg") and inputs that Telerik wraps
   (rbDecorated / rfdDecorated) are excluded; their wrapper is styled instead.
   RadButtons used as bare icons (CssClass "transparent-button", 23 uses) are excluded too. */
html body .RadButton.rbButton:not(.transparent-button),
html body .RadButton.rbSkinnedButton:not(.transparent-button),
html body a.rfdSkinnedButton,
html body input[type="submit"]:not([class^="rg"]):not(.rbDecorated):not(.rfdDecorated),
html body input[type="button"]:not([class^="rg"]):not(.rbDecorated):not(.rfdDecorated),
html body .button {
    border-radius: var(--kc-radius-sm);
    transition: background-color var(--kc-ease), box-shadow var(--kc-ease), transform var(--kc-ease);
}

html body .RadButton.rbButton:not(.transparent-button):hover,
html body .RadButton.rbSkinnedButton:not(.transparent-button):hover,
html body a.rfdSkinnedButton:hover,
html body input[type="submit"]:not([class^="rg"]):not(.rbDecorated):not(.rfdDecorated):hover,
html body input[type="button"]:not([class^="rg"]):not(.rbDecorated):not(.rfdDecorated):hover,
html body .button:hover {
    box-shadow: var(--kc-shadow-1);
}

html body .RadButton.rbButton:not(.transparent-button):active,
html body .RadButton.rbSkinnedButton:not(.transparent-button):active,
html body a.rfdSkinnedButton:active,
html body input[type="submit"]:not([class^="rg"]):not(.rbDecorated):not(.rfdDecorated):active,
html body input[type="button"]:not([class^="rg"]):not(.rbDecorated):not(.rfdDecorated):active,
html body .button:active {
    transform: translateY(1px);
}

/* ---- RadGrid ---- */
html body .RadGrid {
    border-radius: var(--kc-radius-sm);
    box-shadow: var(--kc-shadow-1);
}

/* Round the header corners so the header background doesn't poke out. */
html body .RadGrid .rgMasterTable > thead > tr:first-child > th:first-child {
    border-top-left-radius: var(--kc-radius-sm);
}

html body .RadGrid .rgMasterTable > thead > tr:first-child > th:last-child {
    border-top-right-radius: var(--kc-radius-sm);
}

/* Soft row dividers; selected rows keep Telerik's styling. */
html body .RadGrid .rgRow:not(.rgSelectedRow) > td,
html body .RadGrid .rgAltRow:not(.rgSelectedRow) > td {
    border-bottom: 1px solid var(--kc-divider);
    transition: background-color var(--kc-ease);
}

/* Hover tint layered over whatever background the skin sets. */
html body .RadGrid .rgRow:not(.rgSelectedRow):hover > td,
html body .RadGrid .rgAltRow:not(.rgSelectedRow):hover > td {
    background-image: linear-gradient(var(--kc-hover-tint), var(--kc-hover-tint));
}

html body .RadGrid .rgPager .rgNumPart a {
    border-radius: var(--kc-radius-sm);
    transition: background-color var(--kc-ease);
}

/* ---- RadTabStrip ---- */
html body .RadTabStrip .rtsLink {
    border-radius: var(--kc-radius-sm) var(--kc-radius-sm) 0 0;
    transition: background-color var(--kc-ease), box-shadow var(--kc-ease);
}

/* ---- Popups, tooltips, dropdowns ---- */
.popup-body {
    padding: 10px;                              /* moved from inline (Popup.Master cell) */
}

html body .RadWindow {
    border-radius: var(--kc-radius);
    box-shadow: var(--kc-shadow-3);
    overflow: hidden;                           /* clips the title bar and iframe to the rounded corners */
}

/* No overflow:hidden here, so the callout arrow stays visible. */
html body .RadToolTip {
    border-radius: var(--kc-radius);
    box-shadow: var(--kc-shadow-2);
}

/* Accordion panels, e.g. the sign-in panel (signin.aspx pbLogin) over the background photo. */
html body .RadPanelBar {
    border-radius: var(--kc-radius);
    box-shadow: var(--kc-shadow-2);
    overflow: hidden;                           /* clips item headers to the rounded corners */
}

html body .RadComboBoxDropDown,
html body .RadMenu .rmGroup,
html body .RadCalendarPopup .RadCalendar {
    border-radius: var(--kc-radius-sm);
    box-shadow: var(--kc-shadow-2);
}

html body .RadComboBoxDropDown {
    overflow: hidden;                           /* list scrolls in its own inner div */
}

/* ---- Remaining controls ---- */
/* Native select: unstyled wherever RadFormDecorator is off (Firefox, IE). */
html body select {
    border-radius: var(--kc-radius-sm);
    transition: border-color var(--kc-ease), box-shadow var(--kc-ease);
}

/* Input shells of the less common Telerik inputs. */
html body .RadDropDownList .rddlInner,
html body .RadDropDownTree .rddtInner,
html body .RadSearchBox .rsbInner,
html body .RadAutoCompleteBox .racTokenList,
html body .RadUpload .ruFakeInput {
    border-radius: var(--kc-radius-sm);
    transition: border-color var(--kc-ease), box-shadow var(--kc-ease);
}

/* Buttons, tokens and nodes inside composite controls. */
html body .RadAutoCompleteBox .racToken,
html body .RadUpload .ruButton,
html body .RadWizard .rwzButton,
html body .RadListBox .rlbButton,
html body .RadToolBar .rtbWrap,
html body .RadTreeView .rtIn {
    border-radius: var(--kc-radius-sm);
    transition: background-color var(--kc-ease), box-shadow var(--kc-ease);
}

/* Boxed in-page containers. */
html body .RadListBox .rlbGroup,
html body .RadToolBar .rtbOuter,
html body .RadEditor {
    border-radius: var(--kc-radius-sm);
    box-shadow: var(--kc-shadow-1);
}

/* Drop-down popups appended to the page. */
html body .rddlPopup,
html body .rddtPopup,
html body .racSlide,
html body .rfdSelectBox,
html body .RadCalendarTimeView {
    border-radius: var(--kc-radius-sm);
    box-shadow: var(--kc-shadow-2);
    overflow: hidden;                           /* lists scroll in their own inner element */
}

/* ---- App components ---- */
/* kcButton (_pw_usercontrols/kcButton.ascx, 540 uses) renders span.RadButton.rbLinkButton,
   which section 6 does not reach. (0,3,3) beats MetroTouch's span.RadButton_MetroTouch.rbLinkButton.rbRounded (0,3,1). */
html body span.RadButton.rbLinkButton:not(.transparent-button) {
    border-radius: var(--kc-radius-sm);
    transition: background-color var(--kc-ease), box-shadow var(--kc-ease), transform var(--kc-ease);
}

html body .RadButton[style*="box-shadow"]:not(.transparent-button) {
    box-shadow: var(--kc-shadow-1) !important;  /* softens the inline 3px 3px 5px shadow kcButton EnableShadow writes */
}

html body span.RadButton.rbLinkButton:not(.transparent-button):hover {
    box-shadow: var(--kc-shadow-2) !important;  /* must also beat the inline EnableShadow shadow */
}

html body span.RadButton.rbLinkButton:not(.transparent-button):active {
    transform: translateY(1px);
}

/* App content panels styled by every skin (setting_prompt_btm: 272 uses). */
.setting_prompt,
.setting_prompt_btm {
    border-radius: var(--kc-radius);
    box-shadow: var(--kc-shadow-1);
}

/* Inline-shadowed wrapper around a panel bar (signin.aspx glow): round it to match. */
html body div[style*="box-shadow"]:has(> .RadPanelBar) {
    border-radius: var(--kc-radius);
}

/* ---- Borderless components stay flat ---- */
/* Grids, panel bars and panels a page renders without a border on purpose (inline
   border:none / border:0 / border-style:none / border-width:0, e.g. rgNotifications in
   KidCheck/Notification_Popup.aspx) are layout, not cards */
html body :is(.RadGrid, .RadPanelBar, .setting_prompt, .setting_prompt_btm):is(
    [style*="border:none" i], [style*="border: none" i],
    [style*="border:0" i], [style*="border: 0" i],
    [style*="border-style:none" i], [style*="border-style: none" i],
    [style*="border-width:0" i], [style*="border-width: 0" i]) {
    border-radius: 0;
    box-shadow: none;
}

/* ---- Panels under tab strips ---- */
/* A tab strip sits flush on the panel below it, so that panel keeps square top
   corners and only its bottom corners round. Covers the main content container
   (under the header tabs), a panel placed right after a RadTabStrip, and a panel
   that opens a RadMultiPage view placed right after a RadTabStrip. */
.master-shell > .container,
html body .RadTabStrip + .setting_prompt,
html body .RadTabStrip + .setting_prompt_btm,
html body .RadTabStrip + .RadMultiPage .rmpView > .setting_prompt_btm:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* ---- Wider frame ---- */
/* Once the window is wide enough for the frame to show margins, the inner bands
   keep their old insets (header 15px, tabs and content 50px, footer 40px a side)
   up to the 1600px frame; below that they fill the frame, as before. admin.Master
   (layout_admin.css) never capped them, so --wide stays uncapped. */
.appheader,
.topnav,
.container,
.appfooter,
.appfooter-responsive {
    max-width: none;
}

@media (min-width: 1320px) {
    .appheader {
        max-width: min(1570px, calc(100% - 30px));
    }

    .topnav,
    .container {
        max-width: min(1500px, calc(100% - 100px));
    }

    .appfooter,
    .appfooter-responsive {
        max-width: min(1520px, calc(100% - 80px));
    }

    .master-shell--wide .appheader,
    .master-shell--wide .topnav,
    .master-shell--wide .container,
    .master-shell--wide .appfooter {
        max-width: none;
    }
}

/* ---- Small screens ---- */
/* Phones and small tablets (the main masters send a viewport tag; 768px matches
   baseWS.css's own breakpoint): frame goes edge to edge, header wraps, the tab bar
   scrolls sideways, sidebar layouts stack, and wide grids scroll inside their panel. */
@media (max-width: 768px) {
    body {
        margin-left: 0;
        margin-right: 0;
    }

    .master-shell,
    .master-shell > .container {
        border-radius: 0;
        box-shadow: none;
    }

    .bg {
        width: auto;
        padding: 10px;
    }

    .appheader-toolbar {
        flex-wrap: wrap;
    }

    /* Icons and search stay on the right: beside the logo when they fit, on their
       own right-aligned row when they don't. */
    .appheader-tools {
        margin-left: auto;
        padding-right: 0;
    }

    .appheader-toolbar {
        text-align: right;
        justify-content: flex-end;
    }

    /* Search box gets its own full-width row (baseWS.css already puts it back in
       the flow at this width). */
    .header-app-search-container {
        order: 1;
        width: 100%;
    }

    .header-app-search-icon {
        display: none;
    }

    /* Telerik clips the tab level (overflow:hidden); let it scroll sideways instead. */
    html body .topnav-tabs .RadTabStrip .rtsLevel {
        overflow-x: auto;
        overflow-y: hidden;
    }

    html body .topnav-tabs .RadTabStrip .rtsLI {
        flex: 0 0 auto;
    }

    /* Sidebar layout tables (<td class="SideBar"> beside the content cell) stack;
       the table itself stops being a table so cells can shrink. */
    table:has(> tbody > tr > td.SideBar),
    table:has(> tbody > tr > td.SideBar) > tbody,
    table:has(> tbody > tr > td.SideBar) > tbody > tr,
    table:has(> tbody > tr > td.SideBar) > tbody > tr > td {
        display: block;
        width: auto;
        margin-bottom: 10px;                            /* space between stacked cells */
    }

    .SideBar {
        min-width: 0;
        padding-top: 0;
        padding-right: 0;
    }

    html body .master-shell .RadGrid {
        max-width: 100%;
        overflow-x: auto;
    }

    html body .RadComboBox,
    html body .RadInput,
    html body .RadPicker {
        max-width: 100%;
    }

    .appfooter {
        height: auto;
    }
}

/* Narrow phones: logo centred on top, icons / search / support centred below it. */
@media (max-width: 540px) {
    .appheader-row {
        flex-direction: column;
        align-items: center;
    }

    /* The 190px flex-basis would become a height in a column. */
    .appheader-brand {
        flex: none;
    }

    .appheader-cobrand {
        text-align: center;
    }

    .appheader-tools {
        margin-left: 0;
        width: 100%;
        align-items: center;
    }

    .appheader-toolbar {
        justify-content: center;
        text-align: center;
    }

    .header-app-search-container {
        align-items: center;
    }

    .appheader-tip,
    .header-support-number,
    .header-request-link {
        text-align: center;
    }
}

/* ---- Stacked layouts on small screens ---- */
/* Side-by-side layout tables tagged class="stack-on-phone" stack on small screens,
   first column on top. Popups (body.popup, RadWindow iframes) keep their layout. */
@media (max-width: 768px) {
    body:not(.popup) .stack-on-phone,
    body:not(.popup) .stack-on-phone > tbody,
    body:not(.popup) .stack-on-phone > tbody > tr,
    body:not(.popup) .stack-on-phone > tbody > tr > td {
        display: block;
        box-sizing: border-box;
        width: auto !important;                 /* beats inline widths (600px, 320px, 40% ...) */
        min-width: 0 !important;                /* beats inline min-width:230px */
        max-width: 100% !important;             /* beats inline max-width:600px */
    }

    /* Fixed-width content inside a stacked column shrinks to fit. */
    body:not(.popup) .stack-on-phone > tbody > tr > td table[width]:not([width$="%"]) {
        width: 100%;
    }

    html body:not(.popup) .stack-on-phone .RadPanelBar {
        max-width: 100%;
    }
}