/* 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 */
    .RadGrid_Silk .rgFilterRow {
        display: none;
    }

    .RadGrid_Bootstrap .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;
    }


    /* 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 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;
    }

/* ----- 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;
    }


/* =========================================================================
   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;
}