@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

#components-reconnect-modal {
    z-index: 10000 !important;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("../fonts/inter/Inter-Light.woff2") format("woff2"),url("../fonts/inter/Inter-Light.woff") format("woff")
}

@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url("../fonts/inter/Inter-LightItalic.woff2") format("woff2"),url("../fonts/inter/Inter-LightItalic.woff") format("woff")
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/inter/Inter-Regular.woff2") format("woff2"),url("../fonts/inter/Inter-Regular.woff") format("woff")
}

@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/inter/Inter-Italic.woff2") format("woff2"),url("../fonts/inter/Inter-Italic.woff") format("woff")
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/inter/Inter-Medium.woff2") format("woff2"),url("../fonts/inter/Inter-Medium.woff") format("woff")
}

@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/inter/Inter-MediumItalic.woff2") format("woff2"),url("../fonts/inter/Inter-MediumItalic.woff") format("woff")
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/inter/Inter-SemiBold.woff2") format("woff2"),url("../fonts/inter/Inter-SemiBold.woff") format("woff")
}

@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/inter/Inter-SemiBoldItalic.woff2") format("woff2"),url("../fonts/inter/Inter-SemiBoldItalic.woff") format("woff")
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/inter/Inter-Bold.woff2") format("woff2"),url("../fonts/inter/Inter-Bold.woff") format("woff")
}

@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/inter/Inter-BoldItalic.woff2") format("woff2"),url("../fonts/inter/Inter-BoldItalic.woff") format("woff")
}

@font-face {
    font-family: 'Inter var';
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
    font-named-instance: 'Regular';
    src: url("../fonts/inter/Inter.var.woff2") format("woff2")
}

@font-face {
    font-family: 'Inter var';
    font-weight: 100 900;
    font-display: swap;
    font-style: italic;
    font-named-instance: 'Italic';
    src: url("../fonts/inter/Inter-italic.var.woff2") format("woff2")
}

html, body {
    --font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-family: "Inter var",Inter,-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
    font-family: var(--font-family);
    font-size: 14px;
    font-kerning: normal;
    font-variant-ligatures: contextual common-ligatures;
    font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
    line-height: 1.5;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-font-smoothing: antialiased;
    -ms-content-zooming: none
}

a, .btn--link {
    color: #0366d6;
}

input.grid--filter {
    background: url(../images/filter.png) no-repeat 1px 1px/15px;
    padding-left: 18px;
    height: 20px !important;
}

input.grid--filter:focus {
    background-image: none;
    padding-left: initial;
}

body {
    padding-top: 0px !important;
}

app {
    position: relative;
    display: flex;
    flex-direction: row;
}

label.form-group > span.field {
    display: inline-flex;
    align-items: center;
}

table.dataTable thead th, table.dataTable thead td {
    padding-left: 5px !important;
}

.date-placeholder:before {
    content: attr(placeholder)': ' !important;
    margin-right: 0.5em;
}

.date-placeholder:focus:before,
.date-placeholder:valid:before {
    content: "";
}

.btn-primary,
.btn--primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn.is-disabled {
    pointer-events: none;
    cursor: not-allowed;
}

.btn-group-xs > .btn, .btn-xs {
    padding: .25rem .4rem;
    font-size: .875rem;
    line-height: .5;
    border-radius: .2rem;
}

.main {
    flex: 1;
}

    .main .top-row {
        background-color: #f7f7f7;
        border-bottom: 1px solid #d6d5d5;
    }

        .main .top-row > a, .main .top-row > span, .main .top-row .btn--link {
            white-space: nowrap;
        }

        .main .top-row a:first-child {
            overflow: hidden;
            text-overflow: ellipsis;
        }

.sidebar {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
    border-left: 1px solid rgba(34,34,34,0.1);
    overflow-y: auto;
    display: none;
    width: 250px;
    min-width: 250px;
    height: 100vh;
    position: sticky;
    top: 0;
    z-index: 10;
}

#mobileMenu .drawer_content {
    display:flex;
    flex-direction:column;
}
.sidebar-content-flex {
    flex: 1;
}

.sidebar--hidden {
    width: 0px !important;
    min-width: 0px !important;
}

.top-row {
    height: 3.5rem;
    display: flex;
    align-items: center;
}

#mobileMenu .drawer_inner {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.sidebar .top-row,
#mobileMenu .top-row {
    background-color: rgba(0,0,0,0.4);
}

.sidebar .navbar-brand,
#mobileMenu .navbar-brand {
    font-size: 1.1rem;
}

.sidebar .oi,
#mobileMenu .oi {
    width: 24px;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}
.sidebar .nav-item,
.sidebar .list_item,
#mobileMenu .list_item {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .sidebar .nav-item:first-of-type,
    .sidebar .list_item:first-of-type,
    #mobileMenu .list_item:first-of-type {
        padding-top: 1rem;
    }

    .sidebar .nav-item:last-of-type,
    .sidebar .list_item:last-of-type,
    #mobileMenu .list_item:last-of-type {
        padding-bottom: 1rem;
    }

.sidebar .list_heading .list_item {
    padding-top: 0px;
    padding-bottom: 0px;
}


.list_heading .contactbutton {
    fill: #fff;
    height: 25px;
    width: 25px;
    margin-left: 5px;
}

    .list_heading .contactbutton:hover {
        fill: #c7c7c7;
        height: 25px;
        width: 25px;
        margin-left: 5px;
    }

div.ContactUs div.form-group > label,
div.ContactUs div.form-group > span {
    font-size: 14px;
}


.sidebar .nav-item a {
    color: #fff;
    border-radius: 4px;
    height: 3rem;
    display: flex;
    align-items: center;
    line-height: 3rem;
}

.sidebar .nav-item a.active {
    background-color: #f2f2f2;
    color: #4D4D4D;
}

.anchor-like {
    cursor:pointer;
}

.sidebar .nav-item a:hover,
.sidebar a.list_item:hover,
#mobileMenu a.list_item:hover,
.sidebar .list_item.anchor-like:hover,
#mobileMenu .list_item.anchor-like:hover
{
    /*background-color: #605281;*/
    background-color: rgba(255,255,255,.25);
    color: #fff;
}

.desktop-fi-logo {
    background-color:#ffffff;
}

.app-nav-list .list_heading,
#mobileMenu .list_heading {
    color: #fff;
}

    .app-nav-list .list_heading .list_item .navhome,
    #mobileMenu .list_heading .list_item .navhome {
        border-radius: 50%;
        border: 1px solid rgba(255,255,255,1);
    }

    .app-nav-list .list_heading::after,
    #mobileMenu .list_heading::after {
        border-bottom: 1px solid rgba(255,255,255,1);
    }

.app-nav-list .list_item,
#mobileMenu .list_item {
    color: #fff;
    padding-left: 6px;
}

.app-nav-list a.list_item,
#mobileMenu a.list_item {
    text-decoration: none;
}

.app-nav-list .list_item.is-active,
#mobileMenu .list_item.is-active {
    background-color: #f2f2f2;
    color: #4D4D4D;
    border-radius: 0px;
}

.content {
    padding-top: 1.1rem;
}

.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
}

.invalid:not(input.form) {
    outline: 1px solid red;
}

.validation-message {
    color: #CC0000;
}

.opacity-unset {
    opacity: unset !important;
}

.table-stripes tbody tr:nth-of-type(odd) {
    background-color: rgba(0,0,0,.08)
}

.blues-btn,
.blues-btn:hover {
    color: white;
    background-color: #148EFB;
}

.blues-btn:focus {
    color: white;
    background-color: #6FD6FF;
}

.greens-btn,
.greens-btn:hover {
    color: white;
    background-color: #38B54A;
}

.greens-btn:focus {
    color: white;
    background-color: #A5DC58;
}

.neutral-btn,
.neutral-btn:hover {
    color: white;
    background-color: #333333;
}

.neutral-btn:focus {
    color: white;
    background-color: #464545;
}

.purple-btn,
.purple-btn:hover {
    color: white;
    background-color: #C211A0;
}

.purple-btn:focus {
    color: white;
    background-color: #ED2CC6;
}

.reds-btn,
.reds-btn:hover {
    color: white;
    background-color: #B01111;
}

.reds-btn:focus {
    color: white;
    background-color: #EA2B15;
}

.spectrum-btn,
.spectrum-btn:hover {
    color: white;
    background-color: #F25041;
}

.spectrum-btn:focus {
    color: white;
    background-color: #FF7A6B;
}

.landing-info-container {
    height: calc(100vh - 45px);
    min-width: 250px !important;
}

.btn--toggle:hover, .btn--toggle:active, .btn--toggle:focus, .btn--toggle.is-active {
    color: rgb(34,31,31);
    border-color: rgb(34,31,31);
    background-color: rgb(208,209,211);
    box-shadow: none;
    font-weight: 800;
}

.btn--white {
    color: white;
}

.btn--chip {
    font-size: 12px;
    line-height: 1.2;
}

.btn-group:not(.btn-group--spaced) > .btn:not(:first-child) {
    margin-left: -1px
}

.btn-group--spaced > .btn:not(:first-child), .btn-group--spaced > .dropdown:not(:first-child) {
    margin-left: 6px
}

.btn-group--spaced > .btn {
    border-radius: 6px
}

.btn-group--vertical.btn-group--spaced > .btn:not(:first-child) {
    margin-left: 0
}

.btn-group--vertical.btn-group--spaced > .btn:not(:last-child) {
    margin-bottom: 6px
}

.btn-group--vertical.btn-group--spaced > .btn {
    border-radius: 6px
}

.rule-gray-xs {
    color: rgb(34,31,31);
    height: 2px;
}

.chip--purple {
    background-color: #AD6EAE;
    color: white;
}

.chip--no-border {
    border: none !important;
}

.chip--warning {
    color: #474746;
    background-color: #F8F3D7;
    border: none !important;
}

.font-feature-tnum {
    font-feature-settings: "tnum"
}

.control.control--radio {
    padding-left: 28px;
}

.control--radio input:checked ~ .control_indicator {
    background-color: white;
}

    .control--radio input:checked ~ .control_indicator::before {
        background-color: dimgray;
    }

.list_item:hover {
    color: inherit;
}

.btn_GridLink {
    line-height: normal !important;
    padding: 0px !important;
}

.btn_NoResultsSearch {
    padding: 0px !important;
}

.btn_InlineLink {
    line-height: normal !important;
    padding: 0px !important;
}

.table--NoResults {
    vertical-align: middle;
}

.card--content {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%
}

.mobile-brand-img {
    background-color: white;
}

    .mobile-brand-img img {
        height: 100%;
    }

.icon--btn {
    cursor: pointer;
    color: #1b6ec2;
}

.blazored-typeahead__input {
    display: block;
    width: 100%;
    color: #455564;
    height: 34px;
    font-size: 14px;
    line-height: 1.5;
    padding: 8px;
    background-color: #fff;
    border-radius: 3px;
    -webkit-transition: all .2s cubic-bezier(0.1,.5,.1,1);
    transition: all .2s cubic-bezier(0.1,.5,.1,1)
}

.high-contrast-text-color1 {
    color: #465153;
}

.high-contrast-text-color2 {
    color: #657676;
}

.label--font-larger {
    font-size: 14px;
}

.table--high-contrast th {
    color: #657676;
}

.table.dataTable tbody tr.selected td {
    color: #657676;
    font-weight: bold;
}

.table.dataTable tbody tr.selected td a,
.table.dataTable tbody tr.selected td button {
    color: RGB(2, 64, 136);
}

.text--xs {
    font-size: 10px
}

.text--xxlg {
    font-size: 128px
}

.u-h-maxh-m {
    height: 9%;
    max-height: 9%;
}

.u-h-maxh-xl {
    height: 18.5%;
    max-height: 18.5%;
}

.u-h-maxh-65 {
    height: 65vh;
    max-height: 65vh;
}

.u-h-maxh-75 {
    height: 75vh;
    max-height: 75vh;
}

.u-h-minh-5 {
    height: 5%;
    min-height: 5%;
}
.u-h-minh-10 {
    height: 10%;
    min-height: 10%;
}
.u-h-minh-15 {
    height: 15%;
    min-height: 15%;
}

.u-h-minh-85 {
    height: 85%;
    min-height: 85%;
}
.u-h-minh-90 {
    height: 90%;
    min-height: 90%;
}
.u-h-minh-95 {
    height: 95%;
    min-height: 95%;
}

.u-m-t-xs {
    margin-top: 1px !important
}

.u-m-t-4 {
    margin-top: 4px !important
}

.u-m-t-22 {
    margin-top: 22px !important
}

.u-p-t-0 {
    padding-top: 0px !important
}

.u-p-t-xs {
    padding-top: 4px !important
}

.u-p-b-0 {
    padding-bottom: 0px !important
}

.u-p-b-lg {
    padding-bottom: 24px !important
}

.u-p-b-xl {
    padding-bottom: 36px !important
}

.u-p-l-xs {
    padding-left: 4px !important
}

.u-p-r-xs {
    padding-right: 4px !important
}

.u-p-l-sm {
    padding-left: 8px !important
}

.u-p-l {
    padding-left: 16px !important
}

.u-p-l-lg {
    padding-left: 24px !important
}

.u-m-l-auto {
    margin-left: auto;
}

.u-no-bullet-list {
    list-style-type: none;
}

.u-border-bottom {
    border-bottom: 1px solid rgba(39,45,51,.32);
}

.u-display-block {
    display: block
}

/*Override certain JHA Design styles - Start*/
.stat--bordered-left {
    border-left: 1px solid rgba(39,45,51,.32)
}

.stat--bordered-right {
    border-right: 1px solid rgba(39,45,51,.32)
}

.nav--actions::before {
    border-top: 1px solid rgba(39,45,51,.35);
}

@media (max-width:739px) {
    .nav--tab-bar::before {
        border-top: 1px solid rgba(39,45,51,.35);
    }
}

.well--bordered {
    border-top: 1px solid rgba(39,45,51,.4);
    border-bottom: 1px solid rgba(39,45,51,.4)
}

.well--bordered-top {
    border-top: 1px solid rgba(39,45,51,.4)
}

.well--bordered-bottom {
    border-bottom: 1px solid rgba(39,45,51,.4)
}

.dialog_header {
    border-bottom: 1px solid rgba(39,45,51,.32);
}

.dialog_header--borderless {
    border-bottom-width: 0;
}

.dialog_footer {
    border-top: 1px solid rgba(39,45,51,.32);
}

.drawer_header {
    border-bottom: 1px solid rgba(39,45,51,.32)
}

.drawer_footer {
    border-top: 1px solid rgba(39,45,51,.32)
}

.form-addon {
    border-bottom: 1px solid rgba(39,45,51,.4);
}

.form-addon.is-active, .form-addon:active, .form-addon:focus, .form-addon:hover {
    border-bottom: 1px solid rgba(39,45,51,.4)
}

.field {
    border-bottom: 1px solid rgba(39,45,51,.4);
}

.field--borderless {
    border-bottom: 0
}

.control_indicator {
    border: 1px solid rgba(39,45,51,.4);
}

.dropdown_toggle--indicator::before {
    border-bottom-color: rgba(39,45,51,.35);
}

.dropdown_menu_title {
    border-bottom: 1px solid rgba(39,45,51,.4);
}

.app-list_item {
    border-bottom: 1px solid rgba(39,45,51,.32);
    border-right: 1px solid rgba(39,45,51,.32)
}

.card_header {
    border-bottom: 1px solid rgba(39,45,51,.32);
}

.card_header--borderless {
    border-bottom-width: 0
}

.card_content--border {
    border-top: 1px solid rgba(39,45,51,.32)
}

.card_footer {
    border-top: 1px solid rgba(39,45,51,.32);
}

.card_footer--borderless {
	border-top-width: 0
}

.card hr {
    border-bottom: 1px solid rgba(39,45,51,.32)
}

.well--primary {
    background-color: rgba(58,174,218,.3)
}

.well--success {
    background-color: rgba(76,175,80,.3)
}

.well--danger {
    background-color: rgba(244,67,54,.3)
}

.list_heading::after {
    border-bottom: 1px solid rgba(32,37,42,.3)
}

.list_divider::after {
    border-bottom: 1px solid rgba(32,37,42,.3)
}

.list_item::after {
    border-bottom: 1px solid rgba(39,45,51,.32)
}

#loading-bar .bar {
    background: rgba(0,0,0,.32);
}

.daterangepicker td.in-range {
    background: rgba(58,174,218,.38)
}

.form-control {
    border: 1px solid rgba(39,45,51,.32);
}

.btn--link.is-disabled, .btn--link:disabled {
    color: rgba(141,153,160,.98);
    opacity: .94
}

.switch_toggle::before {
    background-color: lightgray;
}

.sub-title {
    font-size: 14px;
}

.label {
    color: #657676;
}

.btn--primary-outline {
    color: #1b6ec2;
    border-color: #1b6ec2
}
/*Override certain JHA Design styles - End*/
/*Retain certain Bootstrap styles - Start*/
.font-italic {
    font-style: italic !important;
}

.custom-select-sm {
    height: calc(1.5em + .5rem + 2px);
    padding-top: .25rem;
    padding-bottom: .25rem;
    padding-left: .5rem;
    font-size: .875rem
}

.img-fluid {
    max-width: 100%;
    height: auto
}

.text-nowrap {
    white-space: nowrap !important
}
.text-pre-line {
    white-space: pre-line;
}

.px-1 {
    padding-left: .25rem !important
}

.py-1 {
    padding-bottom: .25rem !important
}

.pl-4, .px-4 {
    padding-left: 1.5rem !important
}

.navbar {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: .5rem 1rem
}

    .navbar > .container, .navbar > .container-fluid {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

.navbar-brand {
    display: inline-block;
    padding-top: .3125rem;
    padding-bottom: .3125rem;
    margin-right: 1rem;
    font-size: 1.25rem;
    line-height: inherit;
    white-space: nowrap
}

    .navbar-brand:focus, .navbar-brand:hover {
        text-decoration: none
    }

.navbar-light .navbar-brand {
    color: rgba(0,0,0,.9)
}

    .navbar-light .navbar-brand:focus, .navbar-light .navbar-brand:hover {
        color: rgba(0,0,0,.9)
    }

.navbar-dark .navbar-brand {
    color: #fff
}

    .navbar-dark .navbar-brand:focus, .navbar-dark .navbar-brand:hover {
        color: #fff
    }

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255,255,255,.5)
}

    .navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
        color: rgba(255,255,255,.75)
    }

    .navbar-dark .navbar-nav .nav-link.disabled {
        color: rgba(255,255,255,.25)
    }

    .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link {
        color: #fff
    }

.navbar-dark .navbar-toggler {
    color: rgba(255,255,255,.5);
    border-color: rgba(255,255,255,.1)
}

.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}

.navbar-dark .navbar-text {
    color: rgba(255,255,255,.5)
}

    .navbar-dark .navbar-text a {
        color: #fff
    }

        .navbar-dark .navbar-text a:focus, .navbar-dark .navbar-text a:hover {
            color: #fff
        }

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0,0,0,.08)
}

.pagination {
    display: -ms-flexbox;
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: .25rem
}

.page-item:first-child .page-link {
    margin-left: 0;
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem
}

.page-item:last-child .page-link {
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem
}

.page-item.active .page-link {
    z-index: 1;
    color: #fff;
    background-color: #007bff;
    border-color: #007bff
}

.page-item.disabled .page-link {
    color: #6c757d;
    pointer-events: none;
    cursor: auto;
    background-color: #fff;
    border-color: #dee2e6
}
/*Retain certain Bootstrap styles - End*/
.stat_value {
    font-size: 20px;
}

.stat_value.stat_link {
    cursor: pointer;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }


.form-control.faclist {
    border: none;
}

.docAiReady {
    color: #32c537;
}
.docAiNeedsWork {
    color: #0366d6;
}


@media (max-width: 479.98px) {
    .u-m-t-sm\@xs {
        margin-top: 8px !important;
    }

    .u-m-t\@xs {
        margin-top: 16px !important;
    }

    .u-m-b-sm\@xs {
        margin-bottom: 8px !important;
    }

    .u-m-b\@xs {
        margin-bottom: 16px !important;
    }
}

@media (max-width: 739px) {
    .u-m-b-sm\@sm {
        margin-bottom: 8px !important;
    }

    .u-m-b\@sm {
        margin-bottom: 16px !important;
    }

    .u-m-l-0\@sm {
        margin-left: 0px !important;
    }
}

@media (max-width: 1199.98px) {
    .main .top-row:not(.auth) {
        display: none;
    }

    .main > div {
        padding-left: 1rem !important;
    }

    .u-h-maxh-xl {
        height: 9%;
        max-height: 9%;
    }

    .u-h-maxh-m {
        height: 4%;
        max-height: 4%;
    }

    .u-m-l-auto\@md {
        margin-left: auto;
    }

    .u-m-l-lg\@md {
        margin-left: 24px !important;
    }
}

@media (min-width: 480px) {
    .u-float-right\@sm {
        float: right
    }
}

@media (min-width: 992px) {
    .sidebar {
        display: flex;
        flex-direction: column;
    }
    .app-nav {
        display:block;
    }

    .docque-btn {
        margin-top: 20px;
    }
}

@media (min-width: 1200px) {
    app {
        flex-direction: row;
    }

    .main .top-row {
        position: sticky;
        top: 0;
    }

    .main > div {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }

    .navbar-toggler {
        display: none;
    }

    .sidebar .collapse {
        /* Never collapse the sidebar for wide screens */
        display: flex;
        flex-direction: column;
    }
}

/*
 * Responsive text aligning
 * http://ohryan.ca/2014/08/14/set-responsive-text-alignment-bootstrap-3/
 *
 * EDITED by Nino Škopac for StackOverflow (https://stackoverflow.com/q/18602121/1325575)
 */
.text-xs-left {
    text-align: left;
}

.text-xs-right {
    text-align: right;
}

.text-xs-center {
    text-align: center;
}

.text-xs-justify {
    text-align: justify;
}

@media (min-width: 768px) {
    .text-sm-left {
        text-align: left;
    }

    .text-sm-right {
        text-align: right;
    }

    .text-sm-center {
        text-align: center;
    }

    .text-sm-justify {
        text-align: justify;
    }
}

@media (min-width: 992px) {
    .text-md-left {
        text-align: left;
    }

    .text-md-right {
        text-align: right;
    }

    .text-md-center {
        text-align: center;
    }

    .text-md-justify {
        text-align: justify;
    }
}

@media (min-width: 1200px) {
    .text-lg-left {
        text-align: left;
    }

    .text-lg-right {
        text-align: right;
    }

    .text-lg-center {
        text-align: center;
    }

    .text-lg-justify {
        text-align: justify;
    }
}

table.dataTable thead tr th input[type='checkbox'].select-all {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    /*width: 12px;
    height: 12px;
    box-sizing: border-box;*/
}


/*
* Name conflict between datatables and jhadesign on 'control' style used to create separate column for responsive expandable icon
*/
.control {
    display: table-cell;
}

/* revert to older datatable styles for some areas */
table.dataTable thead th, table.dataTable thead td {
    padding: 10px 18px;
}

table.dataTable.dtr-column > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-column > tbody > tr > th.dtr-control:before,
table.dataTable.dtr-column > tbody > tr > td.control:before, table.dataTable.dtr-column > tbody > tr > th.control:before {
    margin-top: -10px !important;
    margin-left: -10px !important;
}

table.dataTable > tbody > tr.selected > td.select-checkbox:after, table.dataTable > tbody > tr.selected > th.select-checkbox:after {
    content: "\2714" !important;
    font-size: unset !important;
    margin-top: -11px !important;
    margin-left: -4px !important;
}

table.dataTable.dtr-column > tbody > tr > td.control:before, table.dataTable.dtr-column > tbody > tr > th.control:before {
    height: 20px !important;
    width: 20px !important;
    content: '' !important;
    border: none !important;
    box-shadow: none !important;
    box-sizing: initial !important;
    background-color: transparent !important;
    background-image: url(../images/open_arrow.png) !important;
}

table.dataTable.dtr-column > tbody > tr.parent td.control:before, table.dataTable.dtr-column > tbody > tr.parent th.control:before {
    background-image: url(../images/close_arrow.png) !important;
}

.drawerDetailLabel {
    float: left;
    clear: left;
    font-size: 13px;
}

.drawerDetailData {
    float: right;
    clear: right;
    font-size: 12px;
}

div.facilitySummaryLabel {
    float: left;
    clear: left;
    font-size: 13px;
    width: 50%;
}

    div.facilitySummaryLabel.bold {
        font-weight: bold;
    }

        div.facilitySummaryLabel > span,
        div.facilitySummaryLabel.bold > span {
            float: right;
            clear: right;
        }

.facilitySummaryData {
    float: right;
    clear: right;
    font-size: 12px;
    margin-left: 20px;
    /*width: 150px;*/
    width: 40%
}

    .facilitySummaryData > span {
        float: right;
        clear: right;
    }

    .facilitySummaryData.underline {
        border-bottom-color: black;
        border-bottom: 2px;
        border-bottom-style: solid;
    }




.facdata.underline {
    border-bottom-color: black;
    border-bottom: 2px;
    border-bottom-style: solid;
}

.faclabel.bold {
    font-weight: bold;
}

    .faclabel.bold > span,
    .faclabel > span {
        float: left;
        clear: left;
    }

.facdata > span {
    float: right;
    clear: right;
}


/***** QUICK TASK BUTTONS ****/

#quickTasks div {
    margin-bottom: 15px;
    width: 14.25%;
    float: left;
    padding: 5px;
    font-size: 12px;
    color: white;
}

    #quickTasks div button {
        height: 45px;
        margin: auto;
        width: 100%;
        font-weight: bold;
        border: 0px;
        padding: 2px;
    }

@media (max-width: 1280px) { #quickTasks div { width: 25%; } }
@media (max-width: 600px) { #quickTasks div { width: 50%; } }

/***** END QUICK TASK BUTTONS ****/


.tab_item.is-active {
    color: #0366d6;
}

span.tooltip--img::after {
    content: var(--img-src) !important;
}

.card_header .tab_item {
    line-height: 21px;
}

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 100px;
    background-color: transparent;
    color: #fff;
    text-align: center;
    border-radius: 0px;
    padding: 1px 0;
    /* Position the tooltip */
    position: absolute;
    top: -25px;
    left: 10%;
    z-index: 1;
    font-size: 12px;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

@media (max-width: 768px) {
    #invDebtorName, #invClientName {
        width: 250px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
}

@media (max-width: 1024px) {

    #invDebtorName, #invClientName {
        width: 400px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
}


.switch_checkbox:checked + .switch_toggle::before {
    background-color: #35C75A !important
}


.file_drop {
    display: none;
    position: relative;
    margin-bottom: 0;
    text-align: center;
    vertical-align: middle;
    border: 1px dashed #ccc;
    white-space: nowrap;
    background-color: transparent;
    padding: 0 24px;
    font-weight: 500;
    font-size: 14px;
    line-height: 8rem;
    border-radius: 6px;
    -webkit-transition: all .1s cubic-bezier(0.1,.5,.1,1);
    transition: all .1s cubic-bezier(0.1,.5,.1,1);
    outline: 0;
}

.file_drop.has-advanced-upload {
    display: inline-block;
}

.file_drop.is-dragover {
    background-color: #ececec;
}

/*"Masonry"-style dashboard layout*/
@media (min-width: 992px) {
    .masonry-container {
        column-count: 2;
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-gap: 16px;
        -moz-column-gap: 16px;
        -webkit-column-gap: 16px;
    }
}

.masonry-item {
    display: block;
    width: 100%;
    break-inside: avoid-column;
    page-break-inside: avoid; /*Firefox support*/
}

/*Mobile browser testing changes*/
/*1929 - Override JHA design*/
@media (max-width:739px) {
    .table-responsive {
        -ms-touch-action: auto;
        touch-action: auto;
    }
}
/*1934 - Typography and layout helpers when small/mobile*/
/*Bold text at the xs breakpoint only*/
.bold-xs {
    font-weight:normal;
}
@media (max-width:739px) {
    .bold-xs {
        font-weight:500;
    }
}
/*Vertical space / dividers at the xs breakpoint only*/
.vspace-22-xs {
    height:0px;
}
@media (max-width:739px) {
    .vspace-22-xs {
        height: 22px;
    }
}
.v-divider-xs {
    height: 0px;
}

@media (max-width:739px) {
    .v-divider-xs {
        height: 22px;
        border-bottom:2px solid #999;
        margin-bottom:22px;
    }
}
.v-divider-md {
    height: 0px;
}

@media (max-width:991px) {
    .v-divider-md {
        height: 22px;
        border-bottom: 2px solid #999;
        margin-bottom: 22px;
    }
}
/*I did not see a "just bold this" class, which I like to have around.*/
.bold {
    font-weight:500;
}
/*Open-Iconic Carret Right seems misaligned with the text*/
.oi.oi-caret-right {
    top:3px;
}
/*Nested Lists inside cards indentation fix*/
.card_content .list .list {
    margin-right: 0;
}

.wait_spinner {
    position: absolute;
    top: 0px;
    left: 0px;
    min-height: 60px;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

.wait_spinner_background {
    position: absolute;
    top: 0px;
    left: 0px;
    min-height: 60px;
    width: 100%;
    height: 100%;
    background-color: #eceaea;
    opacity: 0.4;
    filter: alpha(opacity=40);
}
/*display:none class*/
.u-no-display {
    display: none;
}
/*Float it over drawers and modals*/
.help-launcher {
    z-index: 100001 !important;
}
/*Globally disable number spinners on <input type="number" /> */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    -moz-appearance: textfield;
}



.alert {
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    padding-right: 4rem;
}

.alert-success {
    color: #5A5B5E;
    background-color: #CBF293;
    border-color: rgba(255,255,255,.1)
}

.alert-banner {
    margin-bottom: 0;
    padding: 5px 0;
    border-radius: 0;
    -webkit-column-rule: rgba(255, 255, 255, 0.8);
    -moz-column-rule: rgba(255, 255, 255, 0.8);
    column-rule: rgba(255, 255, 255, 0.8);
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}

.alert-banner .container:after {
    content: " ";
    display: table;
    clear: both;
}

.dt-buttons {
    float:right !important;
}

.cf {
    clear:both;
}

/*Until the theme loads - the backgrounds should be set to something dark-ish.*/
.bg-color-1 {
    background-color: #333333;
}

.bg-color-2 {
    background-color: #333333;
}

.bg-color-3 {
    background-color: #333333;
}

.bg-color-4 {
    background-color: #333333;
}

.bg-color-5 {
    background-color: #333333;
}

.bg-color-6 {
    background-color: #333333;
}

.collapsable-panel {
    padding: 25px;
    overflow: hidden;
}

.collapsable .title {
    display: table-cell;
}

.dashboard .collapsable .title {
    display: block;
}
.dashboard .icon {
    vertical-align:top;
}


/*Doc AI Processing Wait Spinner*/
/*https://tobiasahlin.com/spinkit/ - https://github.com/tobiasahlin/SpinKit - MIT License*/
.sk-cube-grid {
    width: 40px;
    height: 40px;
    margin: 100px auto;
}

.sk-cube-grid .sk-cube {
    width: 33%;
    height: 33%;
    background-color: #333;
    float: left;
    -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
    animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
}

.sk-cube-grid .sk-cube1 {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

.sk-cube-grid .sk-cube2 {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}

.sk-cube-grid .sk-cube3 {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

.sk-cube-grid .sk-cube4 {
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
}

.sk-cube-grid .sk-cube5 {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

.sk-cube-grid .sk-cube6 {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}

.sk-cube-grid .sk-cube7 {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}

.sk-cube-grid .sk-cube8 {
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
}

.sk-cube-grid .sk-cube9 {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

@-webkit-keyframes sk-cubeGridScaleDelay {
    0%, 70%, 100% {
        -webkit-transform: scale3D(1, 1, 1);
        transform: scale3D(1, 1, 1);
    }

    35% {
        -webkit-transform: scale3D(0, 0, 1);
        transform: scale3D(0, 0, 1);
    }
}

@keyframes sk-cubeGridScaleDelay {
    0%, 70%, 100% {
        -webkit-transform: scale3D(1, 1, 1);
        transform: scale3D(1, 1, 1);
    }

    35% {
        -webkit-transform: scale3D(0, 0, 1);
        transform: scale3D(0, 0, 1);
    }
}
/*End SpinKit*/

.collapsable .card_title {
    display:inline-block;
    float:none;
}


/*Float the error over other dialogs*/
.layoutErrorDialog {
    z-index: 1099 !important;
}

/*Blazor Connection Status Messges*/
.components-reconnect-hide > div {
    display: none;
}

.components-reconnect-show > div {
    display: none;
}

.components-reconnect-show > .show {
    display: block;
}

.components-reconnect-failed > div {
    display: none;
}

.components-reconnect-failed > .failed {
    display: block;
}

.components-reconnect-rejected > div {
    display: none;
}

.components-reconnect-rejected > .rejected {
    display: block;
}

.blazor-reconnect-modal.components-reconnect-show,
.blazor-reconnect-modal.components-reconnect-failed,
.blazor-reconnect-modal.components-reconnect-rejected {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    background-color: #fff;
    opacity: 0.8;
    text-align: center;
    font-weight: bold;
    transition: visibility 0s linear 500ms;
}