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

/*********************************************************** 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;
    --arise-blue: #0075ba;/* #337ab7; */
}

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

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

html {
    font-size: 14px;
}

body {
    background-color: #F4F4F4;
}

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

/*********************************************************** 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: calc(100vh - 33px);
}

    #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;
}

@media (max-width: 767.98px) {
    #login-box {
        left: 0% !important;
        /*transform: none !important;*/
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    #login-box {
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
}

@media (min-width: 992px) {
    #login-box {
        right: 100px;
        width: 500px;
    }
}

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

/*********************************************************** START Main App Layout CSS ***********************************************************/
#app-layout {
    margin-top: 65px;
}

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

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

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

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


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

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

.arise-progress-navigation .appContainer .appGroup .appStepsParent ol,
.arise-progress-navigation .appContainer .appGroup .appPlaceHolder ol {
    margin-bottom: 0px;
}

/*********************************************************** 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-basis: 40px; /* NOTE: This width includes padding */
    min-width: 0;
    margin-left: calc(var(--bs-gutter-x)*-0.5);
    transition: flex-basis 0.5s ease-in-out, width 0.5s ease-in-out;
    overflow-y: hidden;
    padding-right: 21px;
}

.module-left-nav-col #Left-Nav-Wrapper {
    min-width: 0;
}

.module-left-nav-col #Left-Nav-Wrapper > :not(#left-nav-handle) {
    /*transition: opacity 0.35s ease-in-out, visibility 0s linear 0.35s;*/
}

.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 0.35s ease-in-out, visibility 0s linear 0s;*/
}

    .module-left-nav-col.open {
        flex-basis: 100%;
    }

/*@media only screen and (min-width: 578px) {
    .module-left-nav-col.open {
        flex-basis: 50%;
    }
}*/

@media only screen and (min-width: 768px) {
    .module-left-nav-col.open {
        flex-basis: 40%;
    }
}

@media only screen and (min-width: 992px) {
    .module-left-nav-col.open {
        flex-basis: 25%;
    }
}

@media only screen and (min-width: 1200px) {
    .module-left-nav-col.open {
        flex-basis: 18%;
    }
}

#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;
}

#Left-Nav-Wrapper .badge {
    white-space: nowrap;
}

#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;
}

.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] {
    width: 1.2rem;
    height: 1.2rem;
    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/gray_check_circular_icon.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

    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: 1.2rem;
    height: 1.2rem;
    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');
    }

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

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