/*********************************************************** START Arise Fonts CSS ***********************************************************/

@font-face {
    font-family: 'barlow-light';
    src: url('/assets/fonts/barlow-light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'barlow-regular';
    src: url('/assets/fonts/barlow-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'barlow-medium';
    src: url('/assets/fonts/barlow-medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'barlow-semi-bold';
    src: url('/assets/fonts/Barlow-SemiBold.ttf') format('truetype');
    font-style: normal;
}

@font-face {
    font-family: 'barlow-bold';
    src: url('/assets/fonts/Barlow-Bold.ttf') format('truetype');
    font-style: normal;
}

@font-face {
    font-family: 'barlow-bolder';
    src: url('/assets/fonts/Barlow-ExtraBold.ttf') format('truetype');
    font-style: normal;
}

@font-face {
    font-family: 'barlow-italic';
    src: url('/assets/fonts/barlow-italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

/*********************************************************** END Arise Fonts CSS ***********************************************************/

/*********************************************************** START Custom Variables CSS ***********************************************************/

:root {
    --CMS-COLOR: #037eb4;
    --PROVIDER-COLOR: #028930;
    --FAMILY-COLOR: #c56dee;
    --arise-brand-and-badge-width: 250px;
    --arise-nav-scroll-btn-z-index: 1051;
    --app-fixed-footer-height: 33px;
    --arise-left-nav-open-width: clamp(260px, 28vw, 360px);
    --arise-left-nav-peek-width: 20px;
    --arise-left-nav-handle-overhang: 11px;
    --arise-left-nav-page-gap: 0.75rem;
    --arise-left-nav-page-gap-closed: 0rem;
    --arise-left-nav-transition-duration: 0.5s;
    --arise-left-nav-transition-easing: ease-in-out;
    --arise-left-nav-content-fade-duration: 0.35s;
    --arise-form-check-size: 1.45rem;
}

/*********************************************************** END Custom Variables CSS ***********************************************************/

/*********************************************************** START Entire App CSS ***********************************************************/

html {
    font-size: 14px;
}

body {
    background-color: #F4F4F4;
}

.form-control[readonly]:not(.k-input-inner) {
    background-color: var(--bs-secondary-bg);
    opacity: 1;
}

/*main {
    min-height: calc(100vh - var(--app-fixed-footer-height));
    height: calc(100vh - var(--app-fixed-footer-height));
}*/

main > div#app-layout.container-fluid {
    padding-bottom: calc(var(--app-fixed-footer-height) + 1rem);
}

main > div#login-grid-container {
    min-height: 100vh;
    padding-bottom: var(--app-fixed-footer-height);
}

#app-fixed-footer {
    min-height: var(--app-fixed-footer-height);
}

footer.cms {
    border-bottom: 5px solid var(--CMS-COLOR);
}

/*
Don't uncomment - leaving this as a reminder that the BS _utility.scss can do some pretty cool stuff

.fw-light {
    font-family: "barlow-light" !important
}

.fw-normal {
    font-family: inherit !important
}

.fw-bold {
    font-family: "barlow-bold" !important
}

.fw-bolder {
    font-family: "barlow-bolder" !important
}
*/

/* Bootstrap badges are bold by default (700), so use the matching Barlow bold font family. */
.badge {
    font-family: 'barlow-regular';
    font-weight: normal;
    white-space: normal !important;
    text-align: left;
}

#divNavbarWrapper a.navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
}

#divNavbarWrapper a.navbar-brand > img.logo {
    height: 50px;
    width: auto;
}

/*********************************************************** END Entire App CSS ***********************************************************/

/*********************************************************** START Login CSS ***********************************************************/
#main-banner {
    grid-area: banner;
    background: url('../../../assets/images/login/Image of children.jpg');
    background-size: cover;
    background-position-y: center;
}

#main-container {
    grid-area: main-container;
    background: url('../../../assets/images/login/sky blue pattern.png');
    background-size: cover;
    color: #000;
    text-align: center;
}

@media (min-width: 992px) {
    #main-container {
        width: 350px;
    }
}

#login-grid-container {
    min-height: 100%;
}

/*#login-grid-container {
    padding-bottom: calc(var(--app-fixed-footer-height));
}*/

#login-grid-container #main-wrapper {
    flex: 1 1 auto;
    min-height: 0;
}

    #login-grid-container .navbar .navbar-brand .logo {
        width: 180px;
    }

@media (min-width: 992px) {
    #login-grid-container .navbar .navbar-brand .logo {
        width: 350px;
    }
}

#login-grid-container footer {
    background-color: #0B6052;
    /*margin-bottom: 35px;*/
}

    #login-grid-container footer #footer-banner {
        background: url('../../../assets/images/Login/Footer.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center top;
    }

#login-grid-container .login-footer-icon {
    width: 22px;
}

#login-grid-container .odelc {
    width: 90px;
}

#login-box {
    position: relative;
    background-color: var(--bs-white);
    padding: 1.5rem;
    border-radius: var(--bs-border-radius-xl);
    margin: 1rem !important;
}

@media (max-width: 991.98px) {
    #main-wrapper {
        background: url('../../../assets/images/login/sky blue pattern.png');
        background-size: cover;
    }

    #main-container {
        overflow: hidden;
    }

    #login-box {
        position: static !important;
        transform: none !important;
        inset: auto !important;
        width: 100%;
        max-width: 500px;
        margin: auto auto !important;
    }
}

@media (min-width: 992px) {
    #main-wrapper {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 350px;
        grid-template-rows: 1fr;
        align-items: stretch;
    }

    #main-banner {
        grid-column: 1 / 2;
        grid-row: 1;
    }

    #login-box {
        grid-column: 1 / 3;
        grid-row: 1;
        align-self: center;
        justify-self: end;
        z-index: 2;
        width: 500px;
        margin: 1rem 100px 1rem 0 !important;
    }

    #main-container {
        grid-column: 2 / 3;
        grid-row: 1;
        width: auto;
    }
}

a.toc-link {
    font-family: barlow-semi-bold;
    text-decoration: underline;
    font-weight: 600;
}

/*********************************************************** END Login CSS ***********************************************************/

/*********************************************************** START Main App Layout CSS ***********************************************************/

#app-layout {
    margin-top: 64px;
}

.page-title {
    border-bottom: 2px solid #1BB8FC;
}

label,
.k-drag-clue,
.k-grid-header .k-header > .k-link,
.k-header,
.k-menu,
.k-tabstrip,
.k-treemap-title,
.k-grid-header .k-link,
.k-grid-header .k-link:link,
.k-grid-header .k-link:visited,
.k-grouping-header .k-link,
legend,
span.form-label,
span.col-form-label {
    /*font-size: 14px !important;*/
    color: var(--arise-blue);
}

.input-group > .btn {
    --bs-btn-padding-x: .75rem;
}

.arise-hide-if-empty:empty {
    display: none;
}

.newline-br, 
.white-space-pre-line {
    white-space: pre-line;
}

.white-space-pre-wrap {
    white-space: pre-wrap;
}

.word-break-keep-all {
    word-break: keep-all;
}

/*********************************************************** END Main App Layout CSS ***********************************************************/

/*********************************************************** START Accordion Toggle Style ***********************************************************/

.card-header .accordion-toggle,
.card-header .accordion-toggle:link,
.card-header .accordion-toggle:visited,
.card-header .accordion-toggle:hover,
.card-header .accordion-toggle:focus {
    color: var(--bs-card-cap-color, var(--bs-body-color));
}

.card-header .accordion-toggle .accordion-toggle-icons,
.card-header .accordion-toggle .accordion-toggle-icons i {
    color: inherit;
}

.card-header .accordion-toggle .accordion-icon-closed {
    display: none;
}

.card-header .accordion-toggle.collapsed .accordion-icon-open {
    display: none;
}

.card-header .accordion-toggle.collapsed .accordion-icon-closed {
    display: inline-block;
}

/*********************************************************** END Accordion Toggle Style ***********************************************************/

/*********************************************************** START _CountyHeader.cshtml CSS ***********************************************************/

#divNavbarWrapper {
    background-image: url(/assets/images/header-bg.svg), linear-gradient(94deg, rgba(0, 118, 187, 1) 0%, rgba(39, 150, 132, 1) 70%);
    /* NOTE: Remove this to make background match current layout design */
    background-size: cover;
}

    #divNavbarWrapper .arise-brand-and-badge {
        min-width: var(--arise-brand-and-badge-width);
    }

    #divNavbarWrapper .arise-brand-badge,
    #divMainNavbar .nav > li.nav-item > a.nav-link {
        color: #fff;
    }

    #divNavbarWrapper .arise-brand-badge {
        font-family: 'barlow-medium';
        font-size: 12px;
        letter-spacing: 1px;
    }

#divMainNavbar .nav > li.nav-item.active > a.nav-link,
#divMainNavbar .nav > li.nav-item > a.nav-link:hover {
    background: rgba(0, 0, 0, 0.25);
}

#divMainNavbar .nav > li.nav-item + li.nav-item {
    margin-inline-start: 1rem;
}

#divMainNavbar .arise-nav-scroll-container.arise-nav-btn-left {
    box-shadow: inset 10px 0 10px -10px rgba(0, 0, 0, 0.5);
}

#divMainNavbar .arise-nav-scroll-container.arise-nav-btn-both {
    box-shadow: inset -10px 0 10px -10px rgba(0, 0, 0, 0.5), inset 10px 0 10px -10px rgba(0, 0, 0, 0.5);
}

#divMainNavbar .arise-nav-scroll-container.arise-nav-btn-right {
    box-shadow: inset -10px 0 10px -10px rgba(0, 0, 0, 0.5);
}

#divMainNavbar::-webkit-scrollbar,
#divMainNavbar .arise-nav-scroll-container::-webkit-scrollbar {
    scrollbar-width: none;
}

#divMainNavbar .arise-nav-scroll-btn {
    background: rgba(0, 0, 0, 0.25);
    /*border: none;*/
    color: #fff;
    /*padding: 13px 4px !important;*/
    cursor: pointer;
    /*border-radius: 4px;*/
    z-index: var(--arise-nav-scroll-btn-z-index); /* above navbar */
}

@media only screen and (max-width: 767px) {
    #divNavbarWrapper {
        /* NOTE: If this property is removed from the selector above, 
            I suggest setting it here to avoid the background repeating on small screens.
            When the menu is expanded the background image looks better like this.
        */
        /*background-size: cover;*/
    }

    #divMainNavbar .arise-nav-scroll-container {
        width: 100%;
    }

    #divMainNavbar .arise-nav-scroll-btn {
        display: none;
    }

    #divMainNavbar .nav > li.nav-item > a.nav-link {
        padding-left: var(--bs-nav-link-padding-y);
        padding-right: var(--bs-nav-link-padding-y);
    }
}

/*********************************************************** START _CountyHeader.cshtml CSS ***********************************************************/

/*********************************************************** START _LoginPartial.cshtml CSS ***********************************************************/

.arise-slider {
    z-index: calc(var(--arise-nav-scroll-btn-z-index) + 1);
}

    .arise-slider.arise-slider-right {
        position: fixed;
        top: 0;
        right: -320px;
        width: 320px;
        transition: right 0.6s;
    }

        .arise-slider.arise-slider-right.arise-slider-open {
            right: 0;
        }

#user-profile-slider .user-photo {
    width: 100px;
    height: 100px;
}

#user-profile-slider .arise-user-details-text {
    min-width: 0;
    max-width: 100%;
}

    #user-profile-slider .arise-user-details-text .user-name,
    #user-profile-slider .arise-user-details-text .user-email {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

#user-profile-slider img.arise-slider-icon {
    width: 22px;
    height: 22px;
}

/*********************************************************** END _LoginPartial.cshtml CSS ***********************************************************/


/*********************************************************** START Module Sub-Nav CSS ***********************************************************/

.module-sub-nav {
    margin-left: calc(var(--bs-gutter-x) * -0.5);
    margin-right: calc(var(--bs-gutter-x) * -0.5);
    white-space: nowrap;
    overflow-x: auto;
}

    .module-sub-nav li.submenu-item {
        padding-left: calc(var(--bs-gutter-x) * 0.5);
        padding-right: calc(var(--bs-gutter-x) * 0.5);
    }

    .module-sub-nav li.submenu-item > a {
        color: var(--bs-black);
    }

    .module-sub-nav li.submenu-item.active > a {
        color: var(--arise-blue);
    }

/*********************************************************** END Module Sub-Nav CSS ***********************************************************/

/*********************************************************** START Bootstrap Tab Button Colors ***********************************************************/

.nav.nav-tabs > li {
    background-color: #205c65;
    border-top-left-radius: var(--bs-border-radius);
    border-top-right-radius: var(--bs-border-radius);
    margin-right: 1px;
}

.nav.nav-tabs > li > .nav-link {
    color: #fff;
    background-color: transparent;
    border: 1px solid transparent;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.nav.nav-tabs > li > .nav-link:hover,
.nav.nav-tabs > li > .nav-link:focus,
.nav.nav-tabs > li > .nav-link.active {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.30);
    border-color: rgba(0, 0, 0, 0.30);
}

/*********************************************************** END Bootstrap Tab Button Colors ***********************************************************/


/*********************************************************** START Progress Navigation CSS ***********************************************************/

.arise-progress-navigation .card-body {
    /*min-width: 500px;*/
    /*overflow-x: auto;*/
    overflow-y: auto;
    min-height: 7.5rem;
}

.arise-progress-navigation {
    min-width: 0;
}

/*********************************************************** END Progress Navigation CSS ***********************************************************/

/*********************************************************** START Module Badge CSS ***********************************************************/

@media only screen and (min-width: 768px) and (max-width: 992px) {
    .arise-module-badge {
        max-width: 30%;
    }

    .arise-progress-navigation {
        max-width: 70%;
    }
}

/*********************************************************** END Module Badge CSS ***********************************************************/

/*********************************************************** START Case TreeView Nav (consolidated from lib custom styles) ***********************************************************/
#left-nav-handle {
    background-color: #FFF;
    padding: 3px;
    border-radius: 50%;
    filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.2));
    position: absolute;
    top: 30px;
    right: -11px;
    cursor: pointer;
}

    #left-nav-handle.left {
        content: url('/assets/icons/left_arrow_icon.svg');
    }

    #left-nav-handle.right {
        content: url('/assets/icons/right_arrow_icon.svg');
    }

.module-left-nav-col {
    flex: 0 0 calc(var(--arise-left-nav-peek-width) + var(--arise-left-nav-handle-overhang));
    max-width: calc(var(--arise-left-nav-peek-width) + var(--arise-left-nav-handle-overhang));
    min-width: 0;
    margin-left: calc(var(--bs-gutter-x)*-0.5);
    transition: flex-basis var(--arise-left-nav-transition-duration) var(--arise-left-nav-transition-easing), width var(--arise-left-nav-transition-duration) var(--arise-left-nav-transition-easing);
    overflow: visible;
    padding-right: 0;
}

.module-left-nav-col #Left-Nav-Wrapper {
    min-width: var(--arise-left-nav-open-width);
    width: var(--arise-left-nav-open-width);
    max-width: var(--arise-left-nav-open-width);
    transform: translateX(calc(-100% + var(--arise-left-nav-peek-width)));
    transition: transform var(--arise-left-nav-transition-duration) var(--arise-left-nav-transition-easing);
    will-change: transform;
}

.module-left-nav-col #Left-Nav-Wrapper > :not(#left-nav-handle) {
    transition: opacity var(--arise-left-nav-content-fade-duration) var(--arise-left-nav-transition-easing), visibility 0s linear var(--arise-left-nav-content-fade-duration);
}

.module-left-nav-col:not(.open) #Left-Nav-Wrapper > :not(#left-nav-handle) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.module-left-nav-col.open #Left-Nav-Wrapper > :not(#left-nav-handle) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--arise-left-nav-content-fade-duration) var(--arise-left-nav-transition-easing), visibility 0s linear 0s;
}

    .module-left-nav-col.open {
        flex: 0 0 var(--arise-left-nav-open-width);
        max-width: var(--arise-left-nav-open-width);
    }

.module-left-nav-col.open #Left-Nav-Wrapper {
    transform: translateX(0);
}

#Page-Wrapper {
    flex: 0 0 auto;
    min-width: 0;
    margin-left: auto;
    width: 100% !important;
    max-width: 100%;
    transition: width var(--arise-left-nav-transition-duration) var(--arise-left-nav-transition-easing), max-width var(--arise-left-nav-transition-duration) var(--arise-left-nav-transition-easing);
}

.module-left-nav-col + #Page-Wrapper {
    width: calc(100% - var(--arise-left-nav-open-width) - var(--arise-left-nav-page-gap)) !important;
    max-width: calc(100% - var(--arise-left-nav-open-width) - var(--arise-left-nav-page-gap));
}

.module-left-nav-col:not(.open) + #Page-Wrapper {
    width: calc(100% - (var(--arise-left-nav-peek-width) + var(--arise-left-nav-handle-overhang)) - var(--arise-left-nav-page-gap-closed)) !important;
    max-width: calc(100% - (var(--arise-left-nav-peek-width) + var(--arise-left-nav-handle-overhang)) - var(--arise-left-nav-page-gap-closed));
}

#Left-Nav-Wrapper .k-item {
    padding-left: 0 !important;
    cursor: pointer;
    margin-bottom: 3px;
}

#Left-Nav-Wrapper .k-treeview-top,
#Left-Nav-Wrapper .k-treeview-mid,
#Left-Nav-Wrapper .k-treeview-bot {
    padding: 10px 5px 10px 10px !important;
    min-width: 0;
}

#Left-Nav-Wrapper .k-treeview-leaf {
    min-width: 0;
}

#Left-Nav-Wrapper .k-treeview-leaf-text {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#Left-Nav-Wrapper :is(a.k-link, .k-link, p, span:not(.k-icon), label, .form-label) {
    display: block;
    max-width: 100%;
/*    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;*/
}

.module-left-nav-col #Left-Nav-Wrapper .badge {
    white-space: nowrap;
}

.module-left-nav-col.open #Left-Nav-Wrapper .badge {
    white-space: wrap;
}

#Left-Nav-Wrapper ul[role=group]:not([style*="display: none"]),
#Left-Nav-Wrapper li.k-item[aria-expanded=true] > .k-treeview-top:has(.k-treeview-toggle),
#Left-Nav-Wrapper li.k-item[aria-expanded=true] > .k-treeview-mid:has(.k-treeview-toggle),
#Left-Nav-Wrapper li.k-item[aria-expanded=true] > .k-treeview-bot:has(.k-treeview-toggle) {
    background-color: #E8F6FF !important;
}

#Left-Nav-Wrapper ul[role=group]:not([style*="display: none"]) {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

#Left-Nav-Wrapper li.k-item[aria-expanded=true] > .k-treeview-top:has(.k-treeview-toggle),
#Left-Nav-Wrapper li.k-item[aria-expanded=true] > .k-treeview-mid:has(.k-treeview-toggle),
#Left-Nav-Wrapper li.k-item[aria-expanded=true] > .k-treeview-bot:has(.k-treeview-toggle) {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

#Left-Nav-Wrapper ul > li a.k-link,
#Left-Nav-Wrapper ul > li .k-treeview-leaf,
#Left-Nav-Wrapper .k-treeview-top .k-treeview-leaf-text {
    color: #000;
}

#Left-Nav-Wrapper ul > li.active,
#Left-Nav-Wrapper ul > li:focus,
#Left-Nav-Wrapper ul > li:hover {
    background: #d1e8f7 !important;
    border-radius: 8px;
}

#Left-Nav-Wrapper .k-treeview-leaf,
#Left-Nav-Wrapper .k-treeview-leaf.k-selected {
    background-color: transparent !important;
    box-shadow: none !important;
}

#Left-Nav-Wrapper .k-treeview-top:has(.k-treeview-toggle) > .k-treeview-toggle,
#Left-Nav-Wrapper .k-treeview-mid:has(.k-treeview-toggle) > .k-treeview-toggle,
#Left-Nav-Wrapper .k-treeview-bot:has(.k-treeview-toggle) > .k-treeview-toggle {
    display: none !important;
}

#Left-Nav-Wrapper .k-icon.k-i-arrow-s {
    margin-left: auto;
    margin-right: 5px;
}

#Left-Nav-Wrapper ul > li[aria-expanded=true] .k-icon.k-i-arrow-s:before {
    content: " " !important;
    background-image: url('/assets/icons/up_arrow_icon.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#Left-Nav-Wrapper ul > li[aria-expanded=false] .k-icon.k-i-arrow-s:before {
    content: " " !important;
    background-image: url('/assets/icons/down_arrow_icon.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.k-treeview .k-checkbox {
    vertical-align: middle;
}

#LeftNavTree input[type=checkbox],
#LeftNavTree .k-checkbox-wrapper {
    display: none;
}

.leftNav {
    overflow: hidden;
}

.leftNav span.k-in,
.leftNav a.k-in {
    margin: 0;
    padding: .25em .4em .2em .2em;
    line-height: 1.25em;
}

/*********************************************************** END Case TreeView Nav (consolidated from lib custom styles) ***********************************************************/

/*********************************************************** START Arise Table Custom Style ***********************************************************/

table.table thead tr th {
    font-weight: var(--bs-body-font-weight);
    color: var(--arise-blue);
}

/*********************************************************** END Arise Table Custom Style ***********************************************************/

/*********************************************************** START Arise Checkbox Custom Style ***********************************************************/

input[type=checkbox],
.k-grid.k-widget td[role=gridcell] > input[type=checkbox],
.k-grid.k-widget th[role=columnheader] > input[type=checkbox] {
    width: var(--arise-form-check-size);
    height: var(--arise-form-check-size);
    inline-size: var(--arise-form-check-size);
    block-size: var(--arise-form-check-size);
    aspect-ratio: 1 / 1;
    padding: 0;
    box-sizing: border-box;
    background-color: white;
    border-radius: 50%;
    vertical-align: middle;
    border: 1px solid #ddd;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    outline: none !important;
    cursor: pointer;
    background-image: url('/assets/icons/gray_check_circular_icon.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

    input[type=checkbox]:checked,
    .k-grid.k-widget td[role=gridcell] > input[type=checkbox]:checked,
    .k-grid.k-widget th[role=columnheader] > input[type=checkbox]:checked {
        background-image: url('/assets/icons/green_check_circular_icon.svg');
    }

.input-group-text input[type=checkbox][disabled],
.input-group-text input[type=checkbox][readonly],
.input-group-text input.access-disabled-checkbox,
.input-group-text:has(input[type=checkbox][disabled], input[type=checkbox][readonly]) + label.form-control,
.input-group-text:has(input.access-disabled-checkbox) + label.form-control {
    cursor: default;
}

/*********************************************************** END Arise Checkbox Custom Style ***********************************************************/

/*********************************************************** START Arise Radio Button Custom Style ***********************************************************/

input[type=radio] {
    width: var(--arise-form-check-size);
    height: var(--arise-form-check-size);
    background-color: white;
    border-radius: 50%;
    vertical-align: middle;
    border: 1px solid #ddd;
    appearance: none;
    -webkit-appearance: none;
    outline: none !important;
    cursor: pointer;
    background-image: url('/assets/icons/radio_unchecked_icon.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

    input[type=radio]:checked {
        background-image: url('/assets/icons/radio_checked_icon.svg');
    }

.arise-radiobool label.error:empty {
    display: none !important;
}

/*********************************************************** END Arise Radio Button Custom Style ***********************************************************/

/*********************************************************** START Arise Kendo Custom Style ***********************************************************/

/*
    Ensure BS content inside kendo controls renders correctly
    If this causes issues with a control, please discuss with Geoff first.
*/
.k-animation-container,
.k-animation-container *,
.k-animation-container :after,
.k-block .k-header,
.k-widget, 
.k-widget *,
.k-widget :before {
    box-sizing: border-box;
}

.k-animation-container > .k-notification {
    border-width: 0px;
}

/*********************************************************** END Arise Kendo Custom Style ***********************************************************/

/*********************************************************** START Scheduler Style ***********************************************************/

table.k-scheduler-table > tbody > tr > th {
    word-wrap: normal;
}

/* Makes the scheduler draggable buttons slightly darker on hover - based off text-bg-light */
button.btn.draggable.resource:not(.undraggable).active,
button.btn.draggable.resource:not(.undraggable):hover,
button.btn.btn-sm.btnScheduleAutoAssign.active,
button.btn.btn-sm.btnScheduleAutoAssign:hover {
    background-color: color-mix(in srgb, RGBA(var(--bs-light-rgb), var(--bs-bg-opacity, 1)) 85%, black 15%) !important;
}

/*********************************************************** END Scheduler Style ***********************************************************/

/*********************************************************** START Tooltip Style ***********************************************************/

[data-bs-toggle="tooltip"] {
    color: var(--arise-blue);
}

/*********************************************************** END Tooltip Style ***********************************************************/

/*********************************************************** START Arise Table Style ***********************************************************/

table.table.arise-table-last-row-no-border > tbody > tr:last-child > * {
    border-bottom-width: 0 !important;
}

/*********************************************************** END Arise Table Style ***********************************************************/

/*********************************************************** START Arise Reporting ***********************************************************/

.arise-report-iframe-wrapper > iframe {
    border: none;
    min-height: 100vh;
}

/*********************************************************** END Arise Reporting ***********************************************************/

/*********************************************************** START Kendo NumericTextBox ***********************************************************/

/*  TODO: Figure out why this is needed 
    Without this the right border of the control is clipped by the Kendo Spinner buttons
    See the Public Access Facility Staff Management screen
    Doesn't appear for most numeric text box controls because they are required fields and the arise-validation.css adds padding for the indicator
*/
.k-numerictextbox {
    padding-right: 2px;
}

/*********************************************************** END Kendo NumericTextBox ***********************************************************/