/* New UI */
@font-face {
    font-family: 'CanadaTypeGibson';
    src: url('/ResourcePackages/OBSI/assets/dist/fonts/gibson/gibson-regular.woff2') format('woff2'), url('/ResourcePackages/OBSI/assets/dist/fonts/gibson/gibson-regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'CanadaTypeGibson';
    src: url('/ResourcePackages/OBSI/assets/dist/fonts/gibson/Gibson-SemiBold.woff2') format('woff2'), url('/ResourcePackages/OBSI/assets/dist/fonts/gibson/Gibson-SemiBold.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CanadaTypeGibson';
    src: url('/ResourcePackages/OBSI/assets/dist/fonts/gibson/gibson-bold.woff2') format('woff2'), url('/ResourcePackages/OBSI/assets/dist/fonts/gibson/gibson-bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

body, input, textarea, label, .control-label, .form-control {
    font-family: 'CanadaTypeGibson' !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 140% !important;
    letter-spacing: 0px !important;
    text-transform: none !important;
    font-size: 18px !important;
    color: #000000 !important;
    font-weight:500 !important;
}

.c4-bg, .c4-bg .c4-text, .c4-text, p {
    color: #000000 !important;
}

a:hover {
    color: #00B09A !important;
}

a {
    color: #005850 !important;
}

h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    color: #000000 !important;
}

#obsi-footer {
    background: #000000;
    color: rgba(148,148,148);
}

@media only screen and (max-width: 767px) {
    .header-text.image-type .image-item .image-text {
        background: #005850;
    }
}
.btn {
    font-family: 'CanadaTypeGibson' !important;
}
.btn-primary, .btn-default,
button.k-button.k-primary,
.k-grid-toolbar .k-button {
    background: #005850 !important;
    border-radius: 150px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    padding-left: 18px !important;
    padding-right: 18px;
    color: #ffffff !important;
    font-weight: 500 !important;
}

    .btn-primary.disabled:hover, button.k-button.k-primary.disabled:hover,
    .k-grid-toolbar .k-button.disabled:hover, .btn-primary[disabled]:hover,
    button.k-button.k-primary[disabled]:hover, .k-grid-toolbar .k-button[disabled]:hover,
    .btn-primary.disabled:focus, button.k-button.k-primary.disabled:focus,
    .k-grid-toolbar .k-button.disabled:focus, .btn-primary[disabled]:focus,
    button.k-button.k-primary[disabled]:focus, .k-grid-toolbar .k-button[disabled]:focus,
    .btn-primary.disabled.focus, button.k-button.k-primary.disabled.focus, .k-grid-toolbar
    .k-button.disabled.focus, .btn-primary[disabled].focus, button.k-button.k-primary[disabled].focus,
    .k-grid-toolbar .k-button[disabled].focus {
        background: rgba(0, 0, 0, .1);
        border-color: rgba(0, 0, 0, .1);
        opacity: 0.45;
    }

    .k-picker-solid {
        border-color: #ccc;
        color: #212529;
        background-color: #fff !important;
        border-radius: 0 !important;
    }

.k-radio:checked {
    border-color: #007bff;
    color: #007bff !important;
    background-color: #007bff;
}

.notice.success {
    border: 2px solid #005850 !important;
}

    .notice.success div[class*='Message'] {
        color: #dff0d8;
        background: #005850 !important;
    }

        .notice.success div[class*='Message']::after {
            border-top-color: #005850 !important;
        }

.header-text.image-type .image-item .image-text span {
    background: #005850 !important;
    border-radius: 5px;
}

.btn-default, button.k-button {
    color: #fff;
    background-color: #005850;
    border-color: #005850;
}

/*.btn-primary, .btn-default {
    color: #ffffff !important;
    background-color: #00B09A !important;
    border-color: #00B09A !important;
}*/

    .btn-primary:hover, .btn-default:hover, button.k-button:hover {
        color: #ffffff !important;
        background-color: rgba(0,62,56, 1) !important;
        border-color: rgba(0,62,56, 1) !important;
    }

.k-pager-refresh .k-icon {
    color: #00B09A !important;
}

.k-pager-wrap .k-link:hover {
    color: #00B09A !important;
    border-color: #00B09A;
}

.firm-selection .firm-item .item-label {
    position: relative;
    background: #00B09A;
}

    .firm-selection .firm-item .item-label:hover {
        position: relative;
        background: #005850;
    }

    .firm-selection .firm-item .item-label .item-text {
        color: #ffffff !important;
    }

.connections-container #SelectedFirmConnection {
    background: #00B09A !important;
    border-radius: 5px !important;
    color: #ffffff !important;
}

.firm-selection .firm-item .item-icon .fa {
    color: #ffffff !important;
}

.connections-container #SelectedFirmConnection:focus,
.connections-container #SelectedFirmConnection:hover {
    font-weight: bold !important;
    /*background: rgba(204, 204, 204) !important; */
    background: #00B09A !important;
    /*background: #000000 !important;*/
    color: #ffffff !important;
}

#SelectedFirmConnection option:hover {
    background-color: transparent;
    color: #005850;
}

.k-list-item.k-selected, .k-selected.k-list-optionlabel {
    color: #fff;
    background-color: #005850;
}

    .k-list-item.k-selected.k-hover, .k-list-item.k-selected:hover, .k-selected.k-list-optionlabel:hover {
        color: #00B09A;
        background-color: transparent;
    }

.obsi-panel-heading .panel-heading .panel-title .accordion-toggle {
    color: #000000;
}

    .obsi-panel-heading .panel-heading .panel-title .accordion-toggle:hover {
        color: #00B09A !important;
    }

.btn.btn-small {
    padding: 6px 18px !important;
    font-size: 14px;
    font-weight: 500 !important;
    background: rgba(0,88,80, 1) !important;
    border-width: 2px !important;
    border-color: rgba(0,88,80, 1) !important;
}
    .btn.btn-small:hover {
        padding: 6px 18px !important;
        font-size: 14px;
        background: rgba(0,62,56, 1) !important;
    }

/*dropdown menu*/
.obsi-header-nav .mainnav-navbar .mainnav-nav .mainnav-dropdown .mainnav-dropdown-menu {
    background: #000000;
    border-radius: 5px;
}

.obsi-header-nav .mainnav-navbar .mainnav-nav .mainnav-dropdown .mainnav-dropdown-menu li a {
    color: #ffffff !important;
}

.obsi-header-nav .mainnav-navbar .mainnav-nav .mainnav-dropdown .mainnav-dropdown-menu li a:hover {
    background: #000000;
    color: rgba( 0, 163, 144) !important;
    border-radius: 5px;
}

.k-grid a {
    color: #005850;
}

span[class*="k-i-sort"],
.k-select .k-icon,
.k-list-filter .k-icon {
    color: #005850 !important;
}

.k-pager-nav.k-link,
.k-pager-numbers .k-link,
.k-nav-current.k-state-hover .k-link {
    color: #005850 !important;
}

.tpc .k-pager-wrap .k-link,
.tpc .k-pager-wrap .k-pager-nav {
    color: #005850 !important;
}

.k-draghandle.k-state-selected:hover,
.k-ghost-splitbar-horizontal,
.k-ghost-splitbar-vertical,
.k-list > .k-state-highlight,
.k-list > .k-state-selected,
.k-marquee-color,
.k-panel > .k-state-selected,
.k-scheduler .k-scheduler-toolbar .k-state-selected,
.k-scheduler .k-today.k-state-selected,
.k-state-selected,
.k-state-selected:link,
.k-state-selected:visited,
.k-tool.k-state-selected {
    background: #00B09A !important;
    border-color: #00B09A !important;
}

.nav-boxes .nav-box.firm-fees {
    background: #00B09A !important;
}

.case-stages-container .case-stages .case-stage-container .case-stage.complete .stage-title::before {
    color: #00B09A;
}

.case-stages-container .case-stages .case-stage-container .case-stage .stage-arrow {
    border-left-color: #00B09A;
}

.case-stages-container .case-stages .case-stage-container .case-stage.active .stage-title {
    background: #00B09A !important;
}
.nav-boxes .nav-box .box-title .text::after {
    background: #ffffff !important;
}

.notice.warning {
    border: 2px solid #005850;
}

    .notice.warning div[class*='Message'] {
        background: #005850 !important;
    }

        .notice.warning div[class*='Message']::after {
            border-top-color: #005850 !important;
        }

.k-pager-numbers .k-link.k-selected {
    border-color: #00B09A !important;
    background-color: #00B09A !important;
}


/* File Upload */
.k-upload .k-upload-files .k-file-validation-message {
    font-size: 14px !important;
}

/*----------*/
/* Grid headers */
.k-grid-header .k-column-title {
    white-space: normal !important;
    text-overflow: unset !important;
    overflow: visible !important;
    line-height: 1.2em;
    display: inline-block;
}

.k-grid-header th.k-header {
    vertical-align: top !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    white-space: normal !important;
    line-height: 1.2em;
    position: relative;
}

.k-grid-header .k-cell-inner {
    display: flex;
    align-items: flex-start !important;
    gap: 4px;
}

.k-grid-header .k-link {
    display: inline-block;
    max-width: 100%;
}
/*----------*/

.box-title > .text {
    color: white !important;
}

.k-i-loading, .k-loading-image {
    color: #00B09A !important;
}

.notice > div {
    background: #00B09A;
}

.k-i-loading, .k-loading-image {
    color: #00B09A;
}

.notice > div::after {
    border-top-color: #00B09A;
}

.k-upload .k-file-progress .k-progress {
    border-top-color: #00B09A !important;
    background-color: #00B09A !important;
}

.notice {
    border: 2px solid #00B09A;
}
.case-stages-container .case-stages .case-stage-container .case-stage .stage-title {
    background: #00B09A;
}

.at-items .at-body .at-item .at-item-title:hover {
    color: #00B09A;
}

img {
    height: 60px;
}

li.k-step.k-step-current.k-step-focus .k-step-label {
    background: #00B09A;
}
.k-stepper .k-step-current .k-step-indicato {
    border-color: #00B09A !important;
    background-color: #00B09A !important;
}
.k-stepper .k-step-current:hover .k-step-indicato {
    border-color: #005850 !important;
    background-color: #005850 !important;
}

.col-form-label, .tpc.tpc-boolean.tpc-check-box legend.col-form-label, .tpc.tpc-boolean.tpc-radio-button legend.col-form-label {
    font-size: 18px !important;
    font-weight: bold !important;
}

.obsi-header-nav .mainnav-navbar .mainnav-nav > li:hover > a > .link-text::after {
    background: rgba(0,102,94,1) !important;
}

.mainnav-nav li a:hover .link-text {
    color:rgba(0,102,94,1) !important; 
}
.case-stages-container .case-stages .case-stage-container .case-stage.active .stage-arrow {
    border-left-color: #00B09A;
}

:root {
    --obs-primary: #00ADBB; 
    --obs-primary-hover: #0097A3; 
    --obs-focus-ring: rgba(0,173,187,.22);
}

.date-input:focus {
    border-color: var(--obs-primary) !important;
    box-shadow: 0 0 0 3px var(--obs-focus-ring) !important;
}

.date-input {
    accent-color: var(--obs-primary);
}

    .date-input::-webkit-calendar-picker-indicator {
        filter: hue-rotate(145deg) saturate(1.25);
        opacity: .95;
    }

.k-calendar .k-calendar-td.k-selected .k-link,
.k-calendar .k-selected .k-link,
.k-calendar-td.k-selected .k-link {
    background-color: var(--obs-primary) !important;
    border-color: var(--obs-primary) !important;
    color: #fff !important;
}

    .k-calendar .k-calendar-td.k-selected .k-link:hover,
    .k-calendar .k-selected .k-link:hover {
        background-color: var(--obs-primary-hover) !important;
        border-color: var(--obs-primary-hover) !important;
        color: #fff !important;
    }

.k-calendar .k-calendar-td.k-today .k-link,
.k-calendar .k-today .k-link {
    box-shadow: inset 0 0 0 2px var(--obs-primary) !important;
    border-color: var(--obs-primary) !important;
}

.k-calendar .k-focus .k-link,
.k-calendar .k-calendar-td.k-focus .k-link {
    box-shadow: 0 0 0 3px var(--obs-focus-ring) !important;
    border-color: var(--obs-primary) !important;
}

.k-state-selected,
.k-calendar td.k-state-selected a,
.k-calendar .k-state-selected .k-link {
    background-color: var(--obs-primary) !important;
    border-color: var(--obs-primary) !important;
    color: #fff !important;
}

.k-calendar td.k-state-focused a,
.k-calendar .k-state-focused .k-link {
    box-shadow: inset 0 0 0 2px var(--obs-primary) !important;
}

.k-button.k-primary,
.k-button-solid-primary {
    background: var(--obs-primary) !important;
    border-color: var(--obs-primary) !important;
}

    .k-button.k-primary:hover,
    .k-button-solid-primary:hover {
        background: var(--obs-primary-hover) !important;
        border-color: var(--obs-primary-hover) !important;
    }

/*.sf_cols[data-sf-element="Row"]::after {
    content: "";
    display: block;
    clear: both; 
}

.sf_cols[data-sf-element="Row"] > .sf_colsOut.sf_2cols_1_50,
.sf_cols[data-sf-element="Row"] > .sf_colsOut.sf_2cols_2_50 {
    float: left;
    width: 50%;
    max-width: 50%;
    box-sizing: border-box;
}

.sf_cols[data-sf-element="Row"] .sf_colsIn {
    width: 100%;
    box-sizing: border-box;
}

.sf_cols[data-sf-element="Row"] > .sf_colsOut.sf_2cols_1_50,
.sf_cols[data-sf-element="Row"] > .sf_colsOut.sf_2cols_2_50 {
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
}*/

@media (max-width: 767.98px) {
    /*.sf_cols[data-sf-element="Row"] > .sf_colsOut.sf_2cols_1_50,
    .sf_cols[data-sf-element="Row"] > .sf_colsOut.sf_2cols_2_50 {
        padding-left: 12px;
        padding-right: 12px;
    }*/
}

.tpc .form-group {
    margin-bottom: 16px !important; 
}

.tpc .form-row {
    margin-bottom: 12px;
}

.col-form-label,
.tpc.tpc-boolean.tpc-radio-button legend.col-form-label,
.tpc.tpc-boolean.tpc-check-box legend.col-form-label {
    margin-bottom: 6px;
}

@media (max-width: 767.98px) {
    .tpc .form-group {
        margin-bottom: 12px !important;
    }
}


@media (max-width: 767.98px) {
    .sf_cols[data-sf-element="Row"] > .sf_colsOut.sf_2cols_1_50,
    .sf_cols[data-sf-element="Row"] > .sf_colsOut.sf_2cols_2_50 {
        float: none;
        width: 100%;
        max-width: 100%;
    }
}

.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    color: #ffffff !important;
    background-color: #005850 !important;
    border-color: #005850 !important;
}

body, input, textarea, label, .control-label, .form-control {
    font-family: 'CanadaTypeGibson' !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 25.2px !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: #000000 !important;
}

/* Headings */
h1, .h1 {
    font-family: 'CanadaTypeGibson' !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 40px !important;
    line-height: 48px !important;
    letter-spacing: 1px !important;
    color: #000000 !important;
}

h2, .h2 {
    font-family: 'CanadaTypeGibson' !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 30px !important;
    line-height: 36px !important;
    letter-spacing: 1px !important;
    color: #000000 !important;
}

h3, .h3 {
    font-family: 'CanadaTypeGibson' !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 26px !important;
    line-height: 31.2px !important;
    letter-spacing: 1px !important;
    color: #000000 !important;
}

p, li {
    font-family: 'CanadaTypeGibson' !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 25.2px !important;
    letter-spacing: normal !important;
}

a, a:link, a:visited {
    font-family: 'CanadaTypeGibson' !important;
    font-style: normal !important;
    font-weight: 700 !important;
    font-size: 18px !important;
}

.col-form-label,
.tpc.tpc-boolean.tpc-check-box legend.col-form-label,
.tpc.tpc-boolean.tpc-radio-button legend.col-form-label {
    font-family: 'CanadaTypeGibson' !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 25.2px !important;
}

.col-form-label,
.tpc .form-group > label,
.tpc.tpc-boolean.tpc-check-box legend.col-form-label,
.tpc.tpc-boolean.tpc-radio-button legend.col-form-label {
    font-family: 'CanadaTypeGibson' !important;
    font-style: normal !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    line-height: 25.2px !important;
    letter-spacing: normal !important;
}

:root {
    --obs-primary: #00B09A;
    --obs-primary-hover: #008a7e;
    --obs-focus-ring: rgba(0,176,154,.22);
}

.k-radio:checked,
.k-radio.k-checked {
    border-color: var(--obs-primary) !important;
    background-color: var(--obs-primary) !important;
}

    .k-radio:checked::before,
    .k-radio.k-checked::before {
        border-color: #ffffff !important;
    }

.k-checkbox:checked,
.k-checkbox.k-checked {
    border-color: var(--obs-primary) !important;
    background-color: var(--obs-primary) !important;
}

    .k-checkbox:checked::before,
    .k-checkbox.k-checked::before {
        color: #ffffff !important;
        border-color: #ffffff !important;
    }


.k-checkbox:focus,
.k-checkbox.k-focus,
.k-checkbox:focus-visible {
    box-shadow: 0 0 0 3px var(--obs-focus-ring) !important;
}

.k-checkbox + .k-checkbox-label::before,
.k-checkbox-label::before {
    border-color: var(--obs-primary) !important;
}

.k-checkbox:checked + .k-checkbox-label::before,
.k-checkbox.k-checked + .k-checkbox-label::before {
    background-color: var(--obs-primary) !important;
    border-color: var(--obs-primary) !important;
}


.k-checkbox:checked + .k-checkbox-label::after,
.k-checkbox.k-checked + .k-checkbox-label::after {
    color: #fff !important;
    border-color: #fff !important;
}

.k-checkbox:focus + .k-checkbox-label::before,
.k-checkbox:focus-visible + .k-checkbox-label::before {
    box-shadow: 0 0 0 3px var(--obs-focus-ring) !important;
}
h4, .h4 {
    font-family: 'CanadaTypeGibson' !important;
    font-style: normal !important;
    font-weight: 700 !important; 
}

#obsi-header .obsi-header-user,
#obsi-header .login-logout {
    display: flex;
    flex-direction: column;
    align-items: flex-end; 
    justify-content: center;
    text-align: right;
    gap: .5rem;
}

#obsi-header .user-view,
#obsi-header .user-view .logged-in {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: .5rem;
}

    #obsi-header .user-view .buttons {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        gap: .5rem;
    }

#obsi-header .sf-lang-selector {
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
    margin: 0;
    padding: 0;
}

    #obsi-header .sf-lang-selector li {
        list-style: none;
    }

#obsi-header .buttons .btn {
    white-space: nowrap;
}
.tpc-formflow-navigation {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
}