/* christmas lights start */

/* Control panel */
:root {
    /* Speed – tweak these to slow down/speed up each color */
    --flash-base: 4s; /* red */
    --flash-fast: 3.5s; /* green */
    --flash-medium: 4.5s; /* blue */
    --flash-slow: 5s; /* yellow */
    --flash-slower: 6s; /* orange */
    /* C9-style colors */
    /* 1: Red */
    --light-1-color: #ff4b3a;
    --light-1-dim-color: rgba(255, 75, 58, 0.4);
    --light-1-glow: #ff4b3a;
    --light-1-dim-glow: rgba(255, 75, 58, 0.2);
    /* 2: Green */
    --light-2-color: #2ecc71;
    --light-2-dim-color: rgba(46, 204, 113, 0.4);
    --light-2-glow: #2ecc71;
    --light-2-dim-glow: rgba(46, 204, 113, 0.2);
    /* 3: Blue */
    --light-3-color: #3498db;
    --light-3-dim-color: rgba(52, 152, 219, 0.4);
    --light-3-glow: #3498db;
    --light-3-dim-glow: rgba(52, 152, 219, 0.2);
    /* 4: Yellow */
    --light-4-color: #ffd166;
    --light-4-dim-color: rgba(255, 209, 102, 0.4);
    --light-4-glow: #ffd166;
    --light-4-dim-glow: rgba(255, 209, 102, 0.2);
    /* 5: Orange */
    --light-5-color: #ff9f1c;
    --light-5-dim-color: rgba(255, 159, 28, 0.4);
    --light-5-glow: #ff9f1c;
    --light-5-dim-glow: rgba(255, 159, 28, 0.2);
}

.lightrope {
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
    z-index: 1;
    margin: -15px 0 0 0;
    padding: 0;
    pointer-events: none;
    width: 100%;
}

    .lightrope li {
        position: relative;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        list-style: none;
        margin: 0;
        padding: 0;
        width: 12px;
        height: 28px;
        border-radius: 50%;
        margin: 20px;
        display: inline-block;
        /* default: red */
        background: var(--light-1-color);
        box-shadow: 0px 4.6666666667px 24px 3px var(--light-1-glow);
        -webkit-animation-name: flash-1;
        animation-name: flash-1;
        -webkit-animation-duration: var(--flash-base);
        animation-duration: var(--flash-base);
    }

        /* 2nd in each group of 5 – green */
        .lightrope li:nth-child(5n+2) {
            background: var(--light-2-color);
            box-shadow: 0px 4.6666666667px 24px 3px var(--light-2-glow);
            -webkit-animation-name: flash-2;
            animation-name: flash-2;
            -webkit-animation-duration: var(--flash-fast);
            animation-duration: var(--flash-fast);
        }

        /* 3rd – blue */
        .lightrope li:nth-child(5n+3) {
            background: var(--light-3-color);
            box-shadow: 0px 4.6666666667px 24px 3px var(--light-3-glow);
            -webkit-animation-name: flash-3;
            animation-name: flash-3;
            -webkit-animation-duration: var(--flash-medium);
            animation-duration: var(--flash-medium);
        }

        /* 4th – yellow */
        .lightrope li:nth-child(5n+4) {
            background: var(--light-4-color);
            box-shadow: 0px 4.6666666667px 24px 3px var(--light-4-glow);
            -webkit-animation-name: flash-4;
            animation-name: flash-4;
            -webkit-animation-duration: var(--flash-slow);
            animation-duration: var(--flash-slow);
        }

        /* 5th – orange */
        .lightrope li:nth-child(5n+5) {
            background: var(--light-5-color);
            box-shadow: 0px 4.6666666667px 24px 3px var(--light-5-glow);
            -webkit-animation-name: flash-5;
            animation-name: flash-5;
            -webkit-animation-duration: var(--flash-slower);
            animation-duration: var(--flash-slower);
        }

        .lightrope li:before {
            content: "";
            position: absolute;
            background: #222;
            width: 10px;
            height: 9.3333333333px;
            border-radius: 3px;
            top: -4.6666666667px;
            left: 1px;
        }

        .lightrope li:after {
            content: "";
            top: -14px;
            left: 9px;
            position: absolute;
            width: 52px;
            height: 18.6666666667px;
            border-bottom: solid #222 2px;
            border-radius: 50%;
        }

        .lightrope li:last-child:after {
            content: none;
        }

        .lightrope li:first-child {
            margin-left: -40px;
        }

    /* turn off flashing completely */
    .lightrope.lightrope-static li {
        -webkit-animation: none !important;
        animation: none !important;
    }


/* RED */
@-webkit-keyframes flash-1 {
    0%, 100% {
        background: var(--light-1-color);
        box-shadow: 0px 4.6666666667px 24px 3px var(--light-1-glow);
    }

    50% {
        background: var(--light-1-dim-color);
        box-shadow: 0px 4.6666666667px 24px 3px var(--light-1-dim-glow);
    }
}

@keyframes flash-1 {
    0%, 100% {
        background: var(--light-1-color);
        box-shadow: 0px 4.6666666667px 24px 3px var(--light-1-glow);
    }

    50% {
        background: var(--light-1-dim-color);
        box-shadow: 0px 4.6666666667px 24px 3px var(--light-1-dim-glow);
    }
}

/* GREEN */
@-webkit-keyframes flash-2 {
    0%, 100% {
        background: var(--light-2-color);
        box-shadow: 0px 4.6666666667px 24px 3px var(--light-2-glow);
    }

    50% {
        background: var(--light-2-dim-color);
        box-shadow: 0px 4.6666666667px 24px 3px var(--light-2-dim-glow);
    }
}

@keyframes flash-2 {
    0%, 100% {
        background: var(--light-2-color);
        box-shadow: 0px 4.6666666667px 24px 3px var(--light-2-glow);
    }

    50% {
        background: var(--light-2-dim-color);
        box-shadow: 0px 4.6666666667px 24px 3px var(--light-2-dim-glow);
    }
}

/* BLUE */
@-webkit-keyframes flash-3 {
    0%, 100% {
        background: var(--light-3-color);
        box-shadow: 0px 4.6666666667px 24px 3px var(--light-3-glow);
    }

    50% {
        background: var(--light-3-dim-color);
        box-shadow: 0px 4.6666666667px 24px 3px var(--light-3-dim-glow);
    }
}

@keyframes flash-3 {
    0%, 100% {
        background: var(--light-3-color);
        box-shadow: 0px 4.6666666667px 24px 3px var(--light-3-glow);
    }

    50% {
        background: var(--light-3-dim-color);
        box-shadow: 0px 4.6666666667px 24px 3px var(--light-3-dim-glow);
    }
}

/* YELLOW */
@-webkit-keyframes flash-4 {
    0%, 100% {
        background: var(--light-4-color);
        box-shadow: 0px 4.6666666667px 24px 3px var(--light-4-glow);
    }

    50% {
        background: var(--light-4-dim-color);
        box-shadow: 0px 4.6666666667px 24px 3px var(--light-4-dim-glow);
    }
}

@keyframes flash-4 {
    0%, 100% {
        background: var(--light-4-color);
        box-shadow: 0px 4.6666666667px 24px 3px var(--light-4-glow);
    }

    50% {
        background: var(--light-4-dim-color);
        box-shadow: 0px 4.6666666667px 24px 3px var(--light-4-dim-glow);
    }
}

/* ORANGE */
@-webkit-keyframes flash-5 {
    0%, 100% {
        background: var(--light-5-color);
        box-shadow: 0px 4.6666666667px 24px 3px var(--light-5-glow);
    }

    50% {
        background: var(--light-5-dim-color);
        box-shadow: 0px 4.6666666667px 24px 3px var(--light-5-dim-glow);
    }
}

@keyframes flash-5 {
    0%, 100% {
        background: var(--light-5-color);
        box-shadow: 0px 4.6666666667px 24px 3px var(--light-5-glow);
    }

    50% {
        background: var(--light-5-dim-color);
        box-shadow: 0px 4.6666666667px 24px 3px var(--light-5-dim-glow);
    }
}

/* christmas lights end */






































/* skip link at the top of the masterpage */
.skip-link {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

    .skip-link:focus {
        position: absolute;
        left: 6px;
        top: 7px;
        z-index: 999999;
        width: auto;
        height: auto;
        overflow: visible;
        outline: 3px solid #000;
        background: #fff;
        padding: 10px;
        text-decoration: none;
        color: #000;
    }

.system-notification a {
    color: #ffffff !important; /* Makes link text white */
    text-decoration: underline !important; /* Underlines the link text */
    font-weight: 600 !important;
}

.additional_information {
    border: 1px;
    border-style: solid;
    border-color: #dedede;
}

    .additional_information td {
        padding: 6px !important;
    }

.comment_textbox {
    width: 100% !important;
    max-width: 500px;
    height: 62px;
}

.email_body_textbox {
    width: 100% !important;
    max-width: 500px;
    height: 200px;
}

/* for lighthouse */
.RadForm_Silk {
    background-color: transparent !important;
}

.RadGrid_Silk .rgInfoPart strong {
    color: #3e3e3e !important;
}

.RadGrid_Telerik .rgInfoPart {
    color: #000 !important;
}

.RadGrid_Simple .rgInfoPart {
    color: #000 !important;
}

.details_table {
    border-spacing: 0px;
}

    .details_table td {
        padding: 6px;
    }

.RadEditor table.reLayoutWrapper td {
    padding: 0;
}

/*dumb width error with rad editors in html view*/
.RadEditor .rfdTextInput, .rfdTextarea textarea {
    width: 100% !important;
}

.main_table {
    width: 100%;
    border-color: #FFF;
    /* not for sure why this has a border at all - adam - 2/12/2025 */
    /*border-width: 1px;*/
    border-width: 0;
    border-style: solid;
    border-spacing: 0px;
}

    .main_table td {
        padding: 6px;
    }

.main_table_padding_blitz td {
    padding: 20px;
}

.table_padding_only {
    border-spacing: 0px;
}

    .table_padding_only td {
        padding: 6px;
    }

/*.approved_balances_table {
    border: 1px;
    border-style: solid;
    border-color: #818181;
    background-color: White;
    border-spacing: 0px;
}

    .approved_balances_table td {
        padding: 2px;
    }*/

.approved_balances_table {
    border: 1px;
    border-style: solid;
    border-color: #D1D5DB;
    background-color: White;
    border-spacing: 0px;
}

    .approved_balances_table td {
        padding-top: 2px;
        padding-bottom: 2px;
        padding-left: 4px;
        padding-right: 4px;
    }



.approved_balances_table_dark_theme {
    border: 1px;
    border-style: solid;
    border-color: #23262C;
    background-color: #23262C;
    border-spacing: 0px;
}

    .approved_balances_table_dark_theme td {
        padding-top: 2px;
        padding-bottom: 2px;
        padding-left: 4px;
        padding-right: 4px;
    }



hr {
    border: none;
    border-top: 3px double #d9d9d9;
    color: #d9d9d9;
    overflow: visible;
    text-align: center;
    height: 5px;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
}

    hr:after {
        background: #fff;
        content: '§';
        padding: 0 4px;
        position: relative;
        top: -10px;
    }

.error {
    color: #cc0000 !important;
}

.required {
    height: 16px;
    width: 16px;
    border: none 0px #000000;
}

.details_wrapper {
    background-color: #F4F5F1;
    border-color: #818181;
    border-width: 1px;
    border-style: solid;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}

.content_wrapper {
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}

.asset_image {
    border: 1px solid #818181 !important;
    /*padding: 1px;*/
}

.workshop_image {
    float: right;
    margin-left: 8px;
    border: 1px solid #818181 !important;
    padding: 1px;
    margin-bottom: 8px;
}

.icon_text_link {
    display: inline-block;
    /*padding-bottom: 10px;*/
}

    .icon_text_link .icon {
        padding-right: 7px;
    }

    /* hack to make it work with links being inline-block */
    .icon_text_link:hover {
        text-decoration: underline !important;
    }

/* standard Phosphor trash icon used for remove/delete actions */
.delete_icon_link,
.delete_icon_link:link,
.delete_icon_link:visited,
.delete_icon_link:active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-left: 6px;
    color: #888 !important;
    border: 0 !important;
    border-bottom: 0 !important;
    border-radius: 4px;
    text-decoration: none !important;
    vertical-align: middle;
    transition: color .15s ease, background-color .15s ease;
}

    .delete_icon_link i {
        font-size: 20px;
        text-decoration: none !important;
    }

    .delete_icon_link:hover,
    .delete_icon_link:focus {
        color: #dc3545 !important;
        background-color: rgba(220, 53, 69, .08);
        border-bottom: 0 !important;
        text-decoration: none !important;
    }

::placeholder {
    opacity: .4;
}

.responsive_width_130 {
    width: 130px !important;
}

.responsive_width_149 {
    width: 149px !important;
}

.responsive_width_150 {
    width: 150px !important;
}

.responsive_width_200 {
    width: 200px !important;
}

.responsive_width_250 {
    width: 250px !important;
}

.responsive_width_300 {
    width: 300px !important;
}

.responsive_width_350 {
    width: 350px !important;
}

.responsive_width_400 {
    width: 400px !important;
}

.responsive_width_450 {
    width: 450px !important;
}

.responsive_width_500 {
    width: 500px !important;
}

.responsive_width_650 {
    width: 650px !important;
}

.responsive_width_rad_editor {
    width: 650px !important;
}

.responsive_shown_700px {
    display: none !important;
}

@media screen and (max-width: 700px) {
    .responsive_width_130 {
        width: 100px !important;
    }

    .responsive_width_149 {
        width: 100px !important;
    }

    .responsive_width_150 {
        width: 100px !important;
    }

    .responsive_width_200 {
        width: 150px !important;
    }

    .responsive_width_250 {
        width: 150px !important;
    }

    .responsive_width_300 {
        width: 200px !important;
    }

    .responsive_width_350 {
        width: 200px !important;
    }

    .responsive_width_400 {
        width: 200px !important;
    }

    .responsive_width_450 {
        width: 200px !important;
    }

    .responsive_width_500 {
        width: 200px !important;
    }

    .responsive_width_650 {
        width: 300px !important;
    }

    .required {
        display: none;
    }

    /* hides the filter row on the rad grids for small screens.

       Glow added 9/21/2026.  These are keyed to the skin name, and dark mode
       renders Glow, so on a phone the filter row stayed visible in dark mode
       while hiding correctly in light - the columns themselves still hid,
       because those use .responsive_hidden_700px, which leaves a row of filter
       boxes belonging to columns that are no longer there.

       Naming the extra skin is safe here precisely because these rules carry no
       colour - only display - so nothing light-mode leaks into dark or vice
       versa.  Eight grids use AllowFilteringByColumn and all of them benefit. */
    .RadGrid_Silk .rgFilterRow {
        display: none;
    }

    .RadGrid_Bootstrap .rgFilterRow {
        display: none;
    }

    .RadGrid_Glow .rgFilterRow {
        display: none;
    }

    .label:after {
        content: "" !important;
    }

    .main_table_padding_blitz td {
        padding: 6px;
    }

    .responsive_hidden_700px {
        display: none !important;
    }

    .responsive_shown_700px {
        display: inline !important;
    }

    .responsive_width_100_percent_at_700px {
        width: 100% !important;
    }

    /* Telerik's base Skins.Upload.css opens with `.RadUpload{width:430px}`, a
       hard pixel width on the control's outer div.  With HideFileInput="true"
       nothing in that div is visible except the Select button, so the 430px box
       is invisible - but it still sets the width of the table cell it sits in,
       and on a phone that cell is wider than the card.  Every sibling row in the
       same column then inherits the too-wide cell, because they are all
       width:100%, and the URL box, the comments box and the checkbox text all
       run off the right edge.  Found on helpdesk/NetworkDocumentUpload.aspx
       9/21/2026, but 22 pages carry one of these controls, so it is not
       specific to that page.

       width:auto lets the div fill the cell instead of setting it.  Scoped to
       the phone breakpoint so the 430px box stays as-is on the desktop layouts
       it was drawn for.  !important because Telerik registers its stylesheets
       from the code-behind, so they land after this file and would otherwise
       win on source order at equal specificity. */
    .RadUpload,
    .RadAsyncUpload {
        width: auto !important;
    }


    /* remove some of the card padding when on a mobile device */
    .card-body {
        padding-top: 5px !important;
        padding-right: 5px !important;
        padding-bottom: 5px !important;
        padding-left: 5px !important;
    }

    .content {
        /*padding-top: 0px !important;*/
        padding-right: 10px !important;
        /*padding-bottom: 0px !important;*/
        padding-left: 10px !important;
    }
}

@media (min-width:992px) {
    .account_image {
        /*   float: right;
        margin-right: 11px;*/
    }
}





@media screen and (max-width: 1400px) {
    .responsive_hidden_1400px {
        display: none !important;
    }
}


/* used on the login page */
@media screen and (max-width: 1200px) {
    .responsive_hidden_1200px {
        display: none !important;
    }

    .responsive_width_100_percent_at_1200px {
        width: 100% !important;
    }
}








.account_image {
    border: solid 1px #818181;
    /*border: solid 2px #000;
    border-bottom-right-radius: calc(0.5rem - 1px);
    border-bottom-left-radius: calc(0.5rem - 1px);
    border-top-left-radius: calc(0.5rem - 1px);
    border-top-right-radius: calc(0.5rem - 1px);*/
}

.clear_floats {
    clear: both;
}

.rad_list_box_200px {
    width: 200px !important;
}

.rad_list_box_225px {
    width: 225px !important;
}

.rad_list_box_250px {
    width: 250px !important;
}

.rad_list_box_400px {
    width: 400px !important;
}




.rad_list_box_table {
    border-spacing: 0px;
}

    .rad_list_box_table td {
        padding: 6px;
    }

@media screen and (max-width: 700px) {
    .rad_list_box_200px {
        width: 100% !important;
    }

    .rad_list_box_225px {
        width: 100% !important;
    }

    .rad_list_box_250px {
        width: 100% !important;
    }


    .rad_list_box_400px {
        width: 100% !important;
    }


    .rad_list_box_table {
        width: 100%;
    }
}








/* ************************************************************** headings ************************************************************** */

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: .625rem
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-bottom: .625rem;
    font-weight: 400;
    line-height: 1.5715
}

.h1, h1 {
    font-size: 1.625rem
}

.h2, h2 {
    font-size: 1.5rem
}

.h3, h3 {
    font-size: 1.375rem
}

.h4, h4 {
    font-size: 1.25rem
}

.h5, h5 {
    font-size: 1.125rem
}

.h6, h6 {
    font-size: 1rem
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    letter-spacing: -.015em
}


a.data-link-green:link {
    color: green !important;
    text-decoration: underline !important;
    font-weight: 700;
}

a.data-link-green:visited {
    color: green !important;
    text-decoration: underline !important;
    font-weight: 700;
}

a.data-link-green:active {
    color: green !important;
    text-decoration: underline !important;
    font-weight: 700;
}

a.data-link-green:hover {
    color: green !important;
    text-decoration: underline !important;
    font-weight: 700;
}

.data-link-green-text {
    color: green !important;
    text-decoration: underline !important;
    font-weight: 700;
}


.rad_grid_header_text_screen_reader_only {
    color: transparent !important;
    font-size: 0;
    line-height: 0;
}

    .rad_grid_header_text_screen_reader_only::before {
        content: attr(aria-label);
        position: absolute;
        left: -10000px;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }



.knowledgebase-img {
    display: block;
    margin: 20px auto;
    max-width: 80%;
    height: auto;
}








/*.dark_blue_action_button {
    background-color: #286090;
    color: #fff;
    border: none;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 16px;
    padding-right: 16px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

    .dark_blue_action_button:hover {
        background-color: #1e4d73;
        color: #fff;
        text-decoration: none;
    }
*/


.dark_blue_action_button {
    background-color: #286090;
    color: #fff !important;
    border: 1px solid transparent;
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

    .dark_blue_action_button:hover {
        background-color: #1e4d73;
        color: #fff !important;
        text-decoration: none;
    }

.light_grey_cancel_button {
    background-color: #f8f9fa;
    color: #212529;
    border: 1px solid #dee2e6;
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

    .light_grey_cancel_button:hover {
        background-color: #e9ecef;
        color: #212529;
        text-decoration: none;
    }




.light_grey_action_button {
    font-size: 12px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

    .light_grey_action_button:hover {
        background-color: #e9ecef;
        text-decoration: none;
        color: #333;
    }

/* highlights today on the date pickers */
.RadCalendar_Bootstrap td.highlight_today {
    border: 1px solid #8AA1B4 !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
}

/* knowledgebase */
.kb-article-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eef0f3;
}

.kb-article-title {
    margin: 0 0 .5rem 0;
    font-size: 1.75rem;
    font-weight: 600;
    color: #1d2329;
    line-height: 1.2;
}

.kb-article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    color: #6c757d;
    font-size: .9rem;
}

    .kb-article-meta .kb-meta-item {
        display: inline-flex;
        align-items: center;
    }

        .kb-article-meta .kb-meta-item .ph {
            font-size: 1rem;
        }

    .kb-article-meta .kb-meta-divider {
        color: #adb5bd;
        font-size: 1.5rem;
        line-height: 1;
    }

    .kb-article-meta .kb-meta-sections .kb-meta-divider {
        margin-right: .25rem;
    }

    .kb-article-meta .kb-meta-sections a {
        margin-left: .25rem;
    }

/* ===== Article body — shared styles for ALL knowledgebase articles ===== */
.kb-article {
    color: #2c3034;
}

    .kb-article .lead-paragraph {
        font-size: 1.0625rem;
        color: #495057;
        line-height: 1.6;
        margin-bottom: 1.25rem;
    }

    .kb-article p {
        margin-bottom: .75rem;
    }

    /* Callouts */
    .kb-article .callout {
        display: flex;
        align-items: flex-start;
        gap: .75rem;
        padding: .875rem 1rem;
        border-radius: .5rem;
        margin-bottom: .75rem;
    }

    .kb-article .callout-warning {
        background: #fff3cd;
        color: #664d03;
    }

    .kb-article .callout-info {
        background: #d1ecf1;
        color: #0c5460;
    }

    .kb-article .callout-success {
        background: #d1e7dd;
        color: #0f5132;
    }

    .kb-article .callout-danger {
        background: #f8d7da;
        color: #842029;
    }

    .kb-article .callout-icon {
        font-size: 1.4rem;
        flex-shrink: 0;
        line-height: 1;
        margin-top: 1px;
    }

    .kb-article .callout-title {
        margin: 0 0 .15rem 0;
        font-size: .975rem;
        font-weight: 600;
        color: inherit;
    }

    .kb-article .callout p {
        margin: 0;
        color: inherit;
    }

    /* Section headings */
    .kb-article .section-heading {
        display: flex;
        align-items: center;
        gap: .5rem;
        margin: 1.75rem 0 .75rem 0;
    }

        .kb-article .section-heading .ph {
            font-size: 1.4rem;
            color: #0d6efd;
        }

        .kb-article .section-heading h4 {
            margin: 0;
            font-size: 1.25rem;
            color: #1d2329;
        }

    /* Step grid (auto-fit so it adapts to article column width) */
    .kb-article .step-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        gap: .625rem;
        margin: 1rem 0 1.5rem;
    }

    .kb-article .step-card {
        background: #f5f6f8;
        border-radius: .5rem;
        padding: .875rem .5rem .75rem;
        text-align: center;
        position: relative;
        transition: transform .15s ease, box-shadow .15s ease;
    }

        .kb-article .step-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 .375rem .75rem rgba(0,0,0,.06);
        }

    .kb-article .step-num {
        position: absolute;
        top: -8px;
        left: -8px;
        background: #fff;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: .825rem;
        box-shadow: 0 .125rem .25rem rgba(0,0,0,.1);
        color: #0d6efd;
    }

    .kb-article .step-icon {
        font-size: 1.65rem;
        color: #0d6efd;
        display: block;
        margin-bottom: .25rem;
    }

    .kb-article .step-card h6 {
        margin: .25rem 0 .15rem;
        font-weight: 600;
        font-size: .95rem;
        color: #1d2329;
    }

    .kb-article .step-card small {
        display: block;
        color: #6c757d;
        font-size: .75rem;
        line-height: 1.35;
    }

    /* Highlight cards */
    .kb-article .highlight-card {
        border-radius: .5rem;
        padding: 1.125rem 1.25rem;
        margin: 1.25rem 0;
    }

    .kb-article .highlight-card-danger {
        background: #fdf2f2;
        border-left: 4px solid #dc3545;
    }

    .kb-article .highlight-card-info {
        background: #e7f3fb;
    }

    .kb-article .highlight-card-success {
        background: #e8f5ee;
    }

    .kb-article .highlight-card-warning {
        background: #fff8e6;
    }

    .kb-article .highlight-card-header {
        display: flex;
        align-items: center;
        gap: .625rem;
        margin-bottom: .625rem;
    }

        .kb-article .highlight-card-header h5 {
            margin: 0;
            font-weight: 600;
            font-size: 1.1rem;
            color: #1d2329;
        }

    .kb-article .highlight-card p {
        margin: 0 0 .5rem 0;
        color: #495057;
    }

        .kb-article .highlight-card p:last-child {
            margin-bottom: 0;
        }

    /* Icon chip */
    .kb-article .icon-chip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        flex-shrink: 0;
        font-size: 1.05rem;
        background: #cfe2ff;
        color: #084298;
    }

    .kb-article .icon-chip-danger {
        background: #f8d7da;
        color: #842029;
    }

    .kb-article .icon-chip-info {
        background: #cff4fc;
        color: #055160;
    }

    .kb-article .icon-chip-warning {
        background: #fff3cd;
        color: #664d03;
    }

    .kb-article .icon-chip-success {
        background: #d1e7dd;
        color: #0f5132;
    }

    /* Field rows */
    .kb-article .field-row {
        display: flex;
        align-items: flex-start;
        gap: .75rem;
        padding: .75rem 0;
        border-bottom: 1px solid #eef0f3;
    }

        .kb-article .field-row:last-child {
            border-bottom: none;
        }

        .kb-article .field-row.highlight {
            background: #fffaf0;
            border-radius: .375rem;
            padding: .875rem;
            margin: .25rem 0;
            border-bottom: none;
        }

        .kb-article .field-row .field-body {
            flex: 1;
            min-width: 0;
        }

        .kb-article .field-row h6 {
            margin: 0 0 .2rem 0;
            font-weight: 600;
            font-size: .975rem;
            color: #1d2329;
        }

        .kb-article .field-row p {
            margin: 0;
            color: #6c757d;
            line-height: 1.5;
            font-size: .9rem;
        }

        .kb-article .field-row .field-body p + p {
            margin-top: .375rem;
        }

    /* Field badges */
    .kb-article .field-badge {
        display: inline-block;
        padding: .15rem .45rem;
        font-size: .65rem;
        font-weight: 600;
        border-radius: .25rem;
        margin-left: .375rem;
        vertical-align: 2px;
        text-transform: uppercase;
        letter-spacing: .025em;
    }

    .kb-article .field-badge-required {
        background: #f8d7da;
        color: #842029;
    }

    .kb-article .field-badge-info {
        background: #cff4fc;
        color: #055160;
    }

    .kb-article .field-badge-warning {
        background: #fff3cd;
        color: #664d03;
    }

    .kb-article .field-badge-success {
        background: #d1e7dd;
        color: #0f5132;
    }

    /* Summary grid */
    .kb-article .summary-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: .625rem;
        margin-top: 1.25rem;
    }

    .kb-article .summary-card {
        border-radius: .5rem;
        padding: 1rem 1.125rem;
    }

    .kb-article .summary-card-success {
        background: #d1e7dd;
    }

    .kb-article .summary-card-secondary {
        background: #e2e3e5;
    }

    .kb-article .summary-card-info {
        background: #cff4fc;
    }

    .kb-article .summary-card-warning {
        background: #fff3cd;
    }

    .kb-article .summary-card-header {
        display: flex;
        align-items: center;
        gap: .5rem;
        margin-bottom: .375rem;
    }

        .kb-article .summary-card-header h6 {
            margin: 0;
            font-weight: 600;
            font-size: 1rem;
            color: #1d2329;
        }

    .kb-article .summary-card .ph {
        font-size: 1.35rem;
    }

    .kb-article .summary-card-success .ph {
        color: #0f5132;
    }

    .kb-article .summary-card-secondary .ph {
        color: #495057;
    }

    .kb-article .summary-card-info .ph {
        color: #055160;
    }

    .kb-article .summary-card-warning .ph {
        color: #664d03;
    }

    .kb-article .summary-card p {
        margin: 0;
        font-size: .85rem;
        color: #495057;
        line-height: 1.5;
    }

    .kb-article .kb-figure {
        margin: 1.25rem 0;
        text-align: center;
    }

        .kb-article .kb-figure img {
            max-width: 80%;
            height: auto;
            border-radius: .5rem;
            border: 1px solid #dee2e6;
            box-shadow: 0 .25rem .75rem rgba(0,0,0,.08);
        }

        .kb-article .kb-figure figcaption {
            margin-top: .5rem;
            font-size: .825rem;
            color: #6c757d;
            font-style: italic;
        }

.highlight-card-info {
    border-left: 5px solid #0D6EFD;
}

.highlight-card-warning {
    border-left: 5px solid #FFC107;
}

.highlight-card-danger {
    border-left: 5px solid #DC3545;
}

.highlight-card-success {
    border-left: 5px solid #198754;
}

.kb-article pre {
    white-space: pre-wrap;
    word-break: break-all;
}


/* =========================================================================
   .btn-info contrast
   -------------------------------------------------------------------------
   Limitless ships .btn-info as #049aad with white text, which measures 3.37:1
   - under the 4.5:1 WCAG AA threshold for normal-weight text. #047A8A is the
   same teal darkened until white clears the line, at 5.05:1, and the hover and
   active steps are darkened by the same amount so the button still reacts.

   This is not a dark-mode fix. .btn-info has no dark variant in all.min.css -
   only .text-info and .link-info get one - so it rendered identically in both
   themes and was equally short of AA in both. The values below therefore live
   here rather than in esu10_dark_2026.css.

   Written as .btn.btn-info rather than .btn-info because master.css loads
   BEFORE all.min.css in every index.master. At equal specificity the later
   sheet would win; the extra class settles it without needing !important.

   Only the custom properties are set, so the rest of Bootstrap's button
   machinery - focus ring, disabled state, the .btn base rules - is untouched.

   .btn-secondary (#247297, 5.35:1) and .btn-indigo (#5C6BC0, 4.86:1) were
   measured at the same time and both already pass, so neither is touched.
   ========================================================================= */

.btn.btn-info {
    --btn-bg: #047A8A;
    --btn-border-color: #047A8A;
    --btn-hover-bg: #04707E;
    --btn-hover-border-color: #04707E;
    --btn-active-bg: #046673;
    --btn-active-border-color: #046673;
    --btn-disabled-bg: #047A8A;
    --btn-disabled-border-color: #047A8A;
}


/* =========================================================================
   Search results
   -------------------------------------------------------------------------
   One card per hit, for any page that shows search results instead of a
   grid. knowledgebase/ArticleList.aspx (search view) is the first page on
   it; the intent is that the next search page reuses these classes rather
   than writing its own.

   A card, top to bottom:
     .search-result-top      where the item lives (one line, cut with an
                             ellipsis, full text in the tooltip) on the left
                             and the match-count pill on the right
     .search-result-heading  the title link, the edit icon, an Inactive pill
     .search-result-snippet  the best matching excerpt, led by a link to the
                             section it came from when there is one
     .search-result-jumps    other matching sections under a small label and
                             a left rail
     .search-result-footer   author, date and audience badges on a hairline

   Colours read through var(--odie-*) with the light-theme literal as the
   fallback: only esu10_2023 and esu2_2026 declare those properties, and the
   other tenants render the fallback, which is the same value. Dark values
   for the few literals that have no token live in esu10_dark_2026.css under
   the same class names.

   master.css loads before all.min.css, so anything that has to beat a
   Bootstrap rule carries an extra class for specificity rather than
   !important. The grid rules are the exception: the RadGrid skin paints its
   own backgrounds, and only !important reaches them.
   ========================================================================= */

/* a RadGrid whose rows are cards: the grid itself disappears, so the page
   background shows between the cards in either theme */
.RadGrid.search-results-grid,
.RadGrid.search-results-grid .rgMasterTable {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

    .RadGrid.search-results-grid .rgRow > td,
    .RadGrid.search-results-grid .rgAltRow > td,
    .RadGrid.search-results-grid .rgHoveredRow > td {
        background-color: transparent !important;
        border-width: 0 !important;
        padding: 0 !important;
    }

/* The table must take its width from the page, not from its content.

   .search-result-crumb is white-space:nowrap by design - one line, clipped
   with an ellipsis - and nowrap text reports its full length as the cell's
   minimum width, ellipsis or not.  An auto-layout table honours that minimum,
   so on a phone the grid grew to the length of the longest breadcrumb (734px
   against a 355px card) and carried the whole page off the right edge with it.
   There is only ever one visible column here, so fixed layout costs nothing
   and the crumb goes back to doing what it was written to do.

   Both carry !important against Telerik's own inline styles: table-layout:auto
   is written into the table's style attribute server-side, and the client
   script pins a pixel width on the wrapper div after it measures the table.
   Added 9/21/2026. */
.RadGrid.search-results-grid {
    width: 100% !important;
}

    .RadGrid.search-results-grid .rgMasterTable {
        table-layout: fixed !important;
    }

/* the line above the cards: 14 articles match "framework" */
.search-results-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 1rem .25rem;
    font-size: 1rem;
    color: var(--odie-body-color, #1F2937);
}

    .search-results-summary i {
        font-size: 1.25rem;
        color: var(--odie-muted, #6B7280);
    }

    .search-results-summary strong {
        font-weight: 600;
    }

    /* a quiet aside after the count, such as "older memos are still being indexed" */
    .search-results-summary-note {
        font-size: .8125rem;
        color: var(--odie-muted, #6B7280);
    }

/* ----- top line ----- */
.search-result-top {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .3125rem;
}

.search-result-crumb {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: .75rem;
    color: var(--odie-muted, #6B7280);
}

    .search-result-crumb > span + span::before {
        content: "\00b7";
        margin: 0 .5rem;
    }

    .search-result-crumb i {
        font-size: .875rem;
        vertical-align: -.125em;
    }

.search-result-crumb-section {
    font-weight: 600;
    color: #4B5563;
}

.search-result-crumb-sep {
    margin: 0 .3125rem;
}

/* ----- pills: the match count top right, Inactive after the title ----- */
.search-result-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    flex: 0 0 auto;
    padding: .25rem .5625rem;
    border-radius: 50rem;
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    background-color: rgba(21, 122, 172, .11);
    color: var(--odie-link, #157AAC);
}

    .search-result-badge i {
        font-size: .875rem;
    }

    .search-result-top .search-result-badge {
        margin-left: auto;
    }

.search-result-badge-danger {
    background-color: rgba(220, 53, 69, .11);
    color: #B02A37;
}

/* a state that is over rather than wrong, such as a closed ticket */
.search-result-badge-muted {
    background-color: rgba(107, 114, 128, .14);
    color: #4B5563;
}

/* ----- title ----- */
.search-result-heading {
    line-height: 1.35;
}

    .search-result-heading .search-result-badge {
        margin-left: .5rem;
        vertical-align: .125em;
    }

.search-result-title {
    font-size: 1.0625rem;
    font-weight: 600;
    text-decoration: none;
}

    .search-result-title:hover {
        text-decoration: underline;
    }

.search-result-edit {
    margin-left: .375rem;
}

    .search-result-edit img {
        vertical-align: -.125em;
    }

/* ----- excerpt ----- */
.search-result-snippet {
    margin-top: .375rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.search-result-anchor {
    font-weight: 600;
    text-decoration: none;
}

    .search-result-anchor:hover {
        text-decoration: underline;
    }

/* the words that matched, in the excerpts and the jump links */
.search-result mark {
    padding: 0 .125em;
    border-radius: .1875em;
    background-color: rgba(255, 193, 7, .35);
    color: inherit;
}

    /* the title is already a bold link, so matches in it aren't shaded */
    .search-result-title mark {
        padding: 0;
        background-color: transparent;
    }

/* ----- other matching sections ----- */
.search-result-jumps {
    margin: .625rem 0 0 0;
    padding-left: .875rem;
    border-left: 2px solid var(--odie-border-light, #E5E7EB);
}

.search-result-jumps-label {
    margin-bottom: .25rem;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--odie-muted, #6B7280);
}

.search-result-jump + .search-result-jump {
    margin-top: .375rem;
}

.search-result-jump a {
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
}

    .search-result-jump a:hover {
        text-decoration: underline;
    }

.search-result-jump-snippet {
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--odie-muted, #6B7280);
    overflow-wrap: anywhere;
}

/* ----- footer ----- */
.search-result-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem 1rem;
    margin-top: .75rem;
    padding-top: .625rem;
    border-top: 1px solid var(--odie-border-light, #E5E7EB);
    font-size: .8125rem;
    color: var(--odie-muted, #6B7280);
}

.search-result-meta {
    display: inline-flex;
    align-items: center;
    gap: .3125rem;
    white-space: nowrap;
}

    .search-result-meta i {
        font-size: 1rem;
        color: #9CA3AF;
    }

.search-result-audiences {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
    margin-left: auto;
}

    .search-result-audiences a,
    .search-result-audiences a:hover {
        text-decoration: none;
    }

/* On a phone the footer always wraps, so margin-left:auto stops buying the
   badges the far side of the line and just strands them on the right of a row
   of their own, out of line with everything else in the card.  Left aligned
   they sit under the author, which is where the rest of the card starts.
   The desktop layout is wide enough to keep the two ends it was drawn with. */
@media screen and (max-width: 700px) {
    .search-result-audiences {
        margin-left: 0;
    }
}

/* ----- the page a result opens (scripts/search_highlight.js) -----
   A sticky bar above the content with the match count, previous and next,
   back to the results and clear. It floats over white memo and article
   cards, so it is tinted the same amber as the marks, carries an amber rail
   and a real shadow, and leads with a magnifying glass; a white bar simply
   disappeared into the page. The matched words take the same amber, with
   the current one on a solid fill. */
.search-highlight-bar {
    position: sticky;
    top: .75rem;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
    padding: .5rem .5rem .5rem .875rem;
    border: 1px solid #F0D27A;
    border-left: 4px solid #FFC107;
    border-radius: .375rem;
    background-color: #FFF8E1;
    color: var(--odie-body-color, #1F2937);
    box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .16);
}

.search-highlight-bar-icon {
    font-size: 1.25rem;
    line-height: 1;
    color: #B7791F;
}

.search-highlight-bar-text {
    margin-right: auto;
}

.search-highlight-bar a {
    margin: 0 .5rem;
    white-space: nowrap;
}

mark.search-mark {
    padding: 0 .125em;
    border-radius: .1875em;
    background-color: rgba(255, 193, 7, .35);
    color: inherit;
}

    mark.search-mark.search-mark-current {
        background-color: #FFC107;
        color: #000;
    }

/* ----- a Search button with something waiting to be applied -----
   A list page whose dates or search text only apply on Search adds this to
   the button when one of them changes (workshops/SectionList.aspx), so the
   button visibly asks for the click; the postback that follows clears it. */
.search-pending {
    animation: search-pending-pulse 1.6s ease-in-out infinite;
    border-radius: .25rem;
}

@keyframes search-pending-pulse {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(21, 122, 172, .35);
    }

    50% {
        box-shadow: 0 0 0 7px rgba(21, 122, 172, .10);
    }
}


/* =========================================================================
   Pills
   -------------------------------------------------------------------------
   Small rounded status chips: dark ink on a pale tint, no border. They began
   as .odie-pill in contracts/ContractUsage.aspx (depleted, covered, no charge,
   overage) and moved here on 9/19/2026 when the helpdesk Ticket List's search
   view needed the same look for status and priority. The contract names are
   kept; the rest are named for meaning so a new page can pick one without
   inventing colours. Dark values live in esu10_dark_2026.css.
   ========================================================================= */
.odie-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
}

/* warm grey: depleted, low priority, anything quiet */
.odie-pill-depleted,
.odie-pill-neutral {
    background: #F1EFE8;
    color: #444441;
}

/* teal: covered by contract, an open ticket's status */
.odie-pill-covered,
.odie-pill-teal {
    background: #E1F5EE;
    color: #085041;
}

/* yellow-green: no charge */
.odie-pill-no-charge,
.odie-pill-success {
    background: #EAF3DE;
    color: #27500A;
}

/* red: overage, critical priority */
.odie-pill-overage,
.odie-pill-danger {
    background: #FCEBEB;
    color: #791F1F;
}

/* blue: high priority */
.odie-pill-info {
    background: #E3EEF9;
    color: #1B4B72;
}

/* amber: medium priority */
.odie-pill-warning {
    background: #FBF0D0;
    color: #6B4F00;
}

/* indigo: waiting in dispatch */
.odie-pill-indigo {
    background: #ECEAF8;
    color: #3D3480;
}