@import "font.css";
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bs-body-font-family: "Wanted Sans Variable", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    --bs-dropdown-link-active-bg : var(--finbook-sub75);
    --bs-emphasis-color: var(--finbook-sub);
    --bs-body-color: var(--finbook-sub);
    --bs-primary: #2160D0;
    --bs-primary-rgb: 0, 101, 220;
    --finbook-primary-light01: #7AA0E3;
    --finbook-primary-light02: #E9EFFA;
    --bs-secondary: var(--finbook-sub-light02);
    --bs-secondary-color: var(--finbook-sub-light02);
    --bs-secondary-rgb: 197, 202, 212;
    --bs-success: #0F8266;
    --bs-info: var(--finbook-main-light04);
    --bs-warning: #F7B814;
    --bs-warning-rgb: 252, 226, 161;
    --bs-danger: #C00000;
    --bs-danger-rgb: 235, 61, 59;
    --bs-dark: var(--finbook-sub75);
    --bs-border-color: var(--finbook-main-light04);
    --bs-border-radius: .25rem;
    --bs-link-color: var(--finbook-main);
    --bs-link-hover-color: var(--finbook-main-dark01);
    --bs-body-bg: inherit;
    --bs-body-bg-rgb: inherit;
    --finbook-main-dark01: #104044;
    --finbook-main: #2A6267;
    --finbook-main-light01: #6A9195;
    --finbook-main-light02: #AAC0C2;
    --finbook-main-light03: #D4E0E1;
    --finbook-main-light04: #EAEFF0;
    --finbook-main-light05: #F2F6F6;
    --finbook-main-light06: #F9FAFA;
    --finbook-sub75: #505A61;
    --finbook-sub: #24313A;
    --finbook-sub-light01: #7C8389;
    --finbook-sub-light02: #A7ADB0;
    --finbook-sub-light03: #BDC1C4;
    --finbook-sub-light04: #D8DADC;
    --finbook-sub-light05: #E5E6E7;
    --finbook-sub-light06: #F8F9F9;
}

html, body {
    font-size: 16px;
}

#blazor-error-ui {
    display: none;
}

.container-fluid,
.container-xxl {
    padding-right: 2.5rem;
    padding-left: 2.5rem;
}

h5 {
    font-size: .875rem;
    font-weight: 600;
}

strong,
.fw-bold {
    font-weight: 600 !important;
}
.fw-lighter {
    font-family: var(--bs-body-font-family);
    font-weight: 100 !important;
}
small, .small {
    font-family: var(--bs-body-font-family);
    font-size: .6875rem;
    line-height: .6875rem;
}

.fc-sub75 {
    color: var(--finbook-sub75) !important;
}

.fs-7 {
    font-size: .875rem;
}

.fs-8 {
    font-size: .75rem;
}

.text-bg-light {
    color: var(--bs-body-color) !important;
    background-color: var(--bs-white) !important;
}

.text-bg-dark {
    background-color: var(--finbook-main-light01) !important;
}

.text-bg-info {
    color: var(--finbook-main-light02) !important;
    background-color: var(--finbook-main-light05) !important;
}

.text-bg-secondary {
    color: var(--finbook-sub-light01) !important;
    background-color: var(--finbook-sub-light05) !important;
}

.text-bg-warning {
    color: #FF6B00 !important;
    background-color: #FDF1D0 !important;
}
.text-bg-primary {
    color: var(--bs-primary) !important;
    background-color: #D9E7FF !important;
}
.text-bg-success {
    color: var(--bs-success)!important;
    background-color: #E5F1EE !important;
}
.text-bg-danger {
    color: var(--bs-danger) !important;
    background-color: #F9E5E5 !important;
}

.text-info {
    color: var(--finbook-main-light01) !important;
}

.text-dark75 {
    color: var(--finbook-sub75);
}

.text-secondary {
    color: var(--finbook-sub-light01);
}

.badge {
    --bs-badge-padding-x: .625rem;
    --bs-badge-padding-y: .28125rem;
    --bs-badge-font-size: .6875rem;
    --bs-badge-font-weight: 400;
    border-radius: .625rem;
    height: 1.25rem;
}

.filter-chip {
    font-size: .75rem;
    line-height: 1rem;
    padding: .1875rem .5rem .1875rem .3125rem;
    border: 1px solid var(--finbook-sub-light04);
    border-radius: 1rem;
    font-weight: 300;
}
.chip-checked {
    color:  var(--finbook-main);
    border-color: var(--finbook-main-light01);
    background-color: var(--finbook-main-light06);
    font-weight: 500;
}

.chip-all-checked {
    color:  var(--bs-white);
    border-color: var(--finbook-main);
    background-color: var(--finbook-main);
    font-weight: 500;
}

.btn {
    --bs-btn-focus-box-shadow: none !important;
    white-space: nowrap;
    border-radius: .0625rem;
}

.btn span {
    width: calc(100% - 2.25rem);
    display: inline-block;
}

.btn-sm span {
    width: calc(100% - 1.75rem);
    display: inline-block;
}


.btn-xs span {
    width: calc(100% - 1.25rem);
    display: inline-block;
}

.btn-lg {
    --bs-btn-padding-y: .625rem;
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-font-size: 1rem;
    font-weight: 600;
}

.btn-sm {
    --bs-btn-padding-x: .875rem;
}

.btn-xs {
    --bs-btn-padding-x: .75rem;
}

.btn-primary {
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--finbook-main);
    --bs-btn-border-color: var(--finbook-main);
    --bs-btn-hover-bg: var(--finbook-main-dark01);
    --bs-btn-hover-border-color: var(--finbook-main-dark01);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--finbook-main);
    --bs-btn-active-border-color: var(--finbook-main);
    --bs-btn-disabled-bg: var(--finbook-main-light04);
    --bs-btn-disabled-border-color: var(--finbook-main-light04);
}

.btn-primary img,
.btn-primary i {
    filter: brightness(0) saturate(100%) invert(100%) sepia(12%) saturate(4773%) hue-rotate(204deg) brightness(110%) contrast(100%) opacity(75%);
}

.btn-primary:hover img,
.btn-primary:hover i,
.btn-primary:focus img,
.btn-primary:focus i,
.btn-primary:active img,
.btn-primary:active i {
    filter: brightness(0) saturate(100%) invert(100%) sepia(12%) saturate(4773%) hue-rotate(204deg) brightness(110%) contrast(100%);
}

.btn-danger {
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bs-danger);
    --bs-btn-border-color: var(--bs-danger);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: #AD0000;
    --bs-btn-hover-border-color: #AD0000;
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: #AD0000;
    --bs-btn-active-border-color: #AD0000;
    --bs-btn-disabled-color: var(--bs-white);
    --bs-btn-disabled-bg: var(--bs-danger);
    --bs-btn-disabled-border-color: var(--bs-danger);
}

.btn-warning {
    --bs-btn-color: #F17A28;
    --bs-btn-bg: #FCE2A1;
    --bs-btn-border-color: #FCE2A1;
    --bs-btn-hover-color: #FCE2A1;
    --bs-btn-hover-bg: #F29E0B;
    --bs-btn-hover-border-color: #F29E0B;
    --bs-btn-active-color: #FCE2A1;
    --bs-btn-active-bg: #F17A28;
    --bs-btn-active-border-color: #F17A28;
    --bs-btn-disabled-color: #F29E0B;
    --bs-btn-disabled-bg: #FCE2A1;
    --bs-btn-disabled-border-color: #FCE2A1;
}

.btn-dark {
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--finbook-sub);
    --bs-btn-border-color: var(--finbook-sub);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--finbook-sub75);
    --bs-btn-hover-border-color: var(--finbook-sub75);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--finbook-sub75);
    --bs-btn-active-border-color: var(--finbook-sub75);
    --bs-btn-disabled-color: var(--bs-white);
    --bs-btn-disabled-bg: var(--finbook-sub);
    --bs-btn-disabled-border-color: var(--finbook-sub);
}

.btn-outline-dark {
    --bs-btn-color: var(--finbook-main);
    --bs-btn-border-color: var(--finbook-main-light02);
    --bs-btn-hover-color: var(--finbook-main-dark01);
    --bs-btn-hover-bg: var(--finbook-main-light06);
    --bs-btn-hover-border-color: var(--finbook-main);
    --bs-btn-active-color: var(--finbook-main);
    --bs-btn-active-bg: var(--bs-white);
    --bs-btn-active-border-color: var(--finbook-main-light02);
    --bs-btn-disabled-color: var(--finbook-main-light03);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--finbook-main-light05);
}

.btn-outline-dark img,
.btn-outline-dark i {
    opacity: .75;
}

.btn-outline-dark:hover img,
.btn-outline-dark:hover i,
.btn-outline-dark:focus img,
.btn-outline-dark:focus i,
.btn-outline-dark:active img,
.btn-outline-dark:active i {
    opacity: 1;
}

.btn-light {
    --bs-btn-color: var(--finbook-main-light03);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: rgba(255, 255, 255, .15);
    --bs-btn-hover-color: var(--finbook-main-light06);
    --bs-btn-hover-bg: rgba(255, 255, 255, .1);
    --bs-btn-hover-border-color: var(--finbook-main-light01);
    --bs-btn-active-color: var(--finbook-main);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: var(--finbook-main-light05);
    --bs-btn-disabled-color: var(--finbook-main-light03);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
}

.btn-light .icon {
    opacity: 0.55;
}

.btn-light .icon:hover {
    opacity: 1;
}

.link-biz {
    text-decoration: none;
    color: var(--finbook-sub75);
    text-align: left;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
    border: none;
}

.link-tabs-primary {
    -webkit-text-decoration-color: var(--bs-link-color) !important;
    text-decoration-color: var(--bs-link-color) !important;
}

a i {
    color: var(--finbook-main-light01);
}

a,
.btn-link {
    color: var(--finbook-main);
    text-underline-offset: .1625rem;
}

a:hover,
.btn-link:hover {
    color: var(--finbook-main-dark01);
}

a:hover i,
.btn-link:hover i {
    color: var(--finbook-main);
}

.tw-24 {
    width: 1.5rem;
    min-width: 1.5rem;
}

.tw-40 {
    width: 2.5rem;
    min-width: 2.5rem;
}

.tw-60 {
    width: 3.75rem;
    min-width: 3.75rem;
}

.tw-80 {
    width: 5rem;
    min-width: 5rem;
}

.tw-90 {
    width: 5.625rem;
    min-width: 5.625rem;
}

.tw-100 {
    width: 6.25rem;
    min-width: 6.25rem;
}

.tw-120 {
    width: 7.5rem;
    min-width: 7.5rem;
}

.tw-140 {
    width: 8.75rem;
    min-width: 8.75rem;
}

.tw-150 {
    width: 9.375rem;
    min-width: 9.375rem;
}

.tw-160 {
    width: 10rem;
    min-width: 10rem;
}

.tw-200 {
    width: 12.5rem;
    min-width: 12.5rem;
}

.tw-260 {
    width: 16.25rem;
    min-width: 16.25rem;
}

.tw-290 {
    width: 18.125rem;
    min-width: 18.125rem;
}

.tw-460 {
    width: 28.75rem;
    min-width: 28.75rem;
}

.tw-800 {
    width: 50rem;
    min-width: 50rem;
}
.tw-1000 {
    width: 62.5rem;
    min-width: 62.5rem;
}

.table-nonfluid {
    width: auto !important;
}

.table {
    --bs-table-hover-bg: var(--finbook-main-light05);
    --bs-table-border-color: var(--finbook-main-light04);
    --bs-table-striped-bg: var(--finbook-main-light06);
    font-size: .75rem;
}

.table thead tr th {
    color: var(--finbook-main);
    font-size: .625rem;
    font-weight: 400;
    vertical-align: middle;
    background-color: var(--bs-white);
    border-bottom: 1px solid var(--finbook-main-light01);
    border-left-color: transparent !important;
    border-right-color: transparent !important;
}
.table thead {
    border-top-color: transparent !important;
}
.table thead tr th.t-3depth,
.table thead tr th.t-4depth{
    color: rgba(75, 91, 122, .6);
}
td,
th {
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}

th {
    font-weight: 600;
}

.t-1depth {
    background-color: var(--finbook-main-light05) !important;
    border-color: var(--finbook-main-light04) !important;
}
thead th.t-1depth {
    background-color: var(--finbook-main-light05) !important;
    border-color: var(--finbook-main-light01) !important;
}

.t-2depth {
    background-color: var(--finbook-main-light04) !important;
    border-color: #E6E8F0 !important;
}

.t-3depth {
    background-color: var(--finbook-main-light03) !important;
    border-color: #D7DAE7 !important;
}

.t-4depth {
    background-color: var(--finbook-main-light02) !important;
    border-color: #C4C9DD !important;
}

.t-5depth {
    background-color: var(--finbook-main-light01) !important;
}

.sub-info td, .sub-info th {
    background-color: rgba(241, 243, 245, .8);
}
.table-hover>tbody>tr:hover>.t-1depth {
    --bs-table-bg-state: var(--finbook-main-light04);
}

.table-hover>tbody>tr:hover>td.t-2depth,
.table-hover>tbody>tr:hover>th.t-2depth,
.table-hover>tbody>tr.t-2depth:hover td,
.table-hover>tbody>tr.t-2depth:hover th {
    --bs-table-bg-state: var(--finbook-main-light03) !important;
}

.table-hover>tbody>tr:hover> td.t-3depth,
.table-hover>tbody>tr:hover> th.t-3depth,
.table-hover>tbody>tr.t-3depth:hover td,
.table-hover>tbody>tr.t-3depth:hover th {
    --bs-table-bg-state: var(--finbook-main-light02) !important;
}

.table-hover>tbody>tr:hover>.t-4depth,
.table-hover>tbody>tr.t-4depth:hover td,
.table-hover>tbody>tr.t-4depth:hover th {
    --bs-table-bg-state: var(--finbook-main-light01) !important;
}
.table-hover>tbody>tr.bg-warning:hover td {
    --bs-table-bg-state: var(--bs-warning-rgb)!important;
}
.td-num-clients span {
    display: inline-block;
    width: 40px;
}
.table-primary {
    --bs-table-color: var(--finbook-main-dark01);
    --bs-table-bg: var(--finbook-primary-light02);
    --bs-table-border-color:var(--finbook-main-light03);
    --bs-table-striped-bg: var(--finbook-primary-light02);
    --bs-table-striped-color: var(--finbook-main-dark02);
    --bs-table-active-bg: var(--finbook-primary-light02);
    --bs-table-active-color: var(--finbook-main-dark01);
    --bs-table-hover-bg: var(--finbook-primary-light01);
    --bs-table-hover-color: var(--finbook-main-dark01);
}
.table-primary .td-focus {
    background-color: var(--finbook-main-light04);
}
.divider-bottom,
.divider-bottom td,
.divider-bottom th {
    border-bottom: 1px solid var(--finbook-main-light03) !important;
    --bs-table-border-color : var(--finbook-main-light03) !important;
}
.divider-bottom td.t-3depth, .divider-bottom td.t-4depth,
.divider-bottom th.t-3depth, .divider-bottom th.t-4depth {
    border-bottom: 1px solid var(--finbook-main-light03) !important;
    --bs-table-border-color : var(--finbook-main-light03) !important;
}

.divider-top,
.divider-top td,
.divider-top th {
    border-top: 1px solid var(--finbook-main-light03) !important;
    --bs-table-border-color : var(--finbook-main-light03) !important;
}

.divider-right {
    border-right: 1px solid var(--finbook-main-light05) !important;
}

.table-brief {
    width: 27.5rem;
    margin-left: auto !important;
    margin-bottom: 0;
}

.table-brief thead tr th,
.table-brief tbody tr th {
    border: 1px solid var(--finbook-main-light01);
}

.td-brief {
    padding: 1.25rem 0 1.25rem 0 !important;
}

.tr-ref td,
.tr-ref th,
.tr-ref {
    color: var(--finbook-main-light01);
}

.table-hover>tbody>tr>.td-brief,
.table-hover>tbody>tr:hover>.td-brief {
    background: var(--bs-white) !important;
    --bs-table-bg-state: var(--bs-white) !important;
}

.section-title {
    font-size: .875rem;
    font-weight: 600;
    padding: 0 .75rem;
    border-left: .1875rem solid var(--finbook-main);
    white-space: nowrap;
    cursor: pointer;
}

.table-section th.active,
.table-section td.active {
    background-color: var(--finbook-main-light04);
    color: var(--finbook-main);
}
.table-sm th, .table-sm td {
    line-height: 1.25rem;
}

.cat-wrap {
    padding: 1rem;
}

.cat-list {
    min-width: 160px;
    margin-right: 1rem;
}

.cat-list-items {
    padding: 1rem;
}

.chart-wrap {
    width: calc(100% - 192px);
    height: 541px;
    padding: 1rem;
    display: flex !important;
    align-items: flex-end !important;
    flex-direction: column !important;
}

.chart {
    width: 100% !important;
    height: 100%;
    min-height: 31.25rem;
    background-color: var(--bs-white);
    margin-bottom: 1rem;
}

.table-wrap {
    width: calc(100% - 176px);
    padding: 1rem;
    display: flex !important;
    align-items: flex-end !important;
    flex-direction: column !important;
}
.pagination {
    --bs-pagination-active-bg: var(--bs-link-color);
    --bs-pagination-active-border-color: var(--bs-link-color);
}

.bb-grid-pagination-text {
    font-size: .75rem;
    color: var(--bs-dark);
}

.form-control {
    width: 100%;
    padding: .375rem .75rem;
    font-size: .875rem;
    line-height: 1.375rem;
    font-variant-numeric: tabular-nums;
    background-color: var(--bs-white);
    border-radius: .0625rem !important;
}

.form-control-sm {
    font-size: .75rem;
    line-height: 1rem;
    font-variant-numeric: tabular-nums;
    border-radius: 0 !important;
}
td > .form-control-sm, th > .form-control-sm {
    min-height : 1.5rem;
    padding: 0 .25rem !important;
    font-variant-numeric: tabular-nums;
    border-radius: 0 !important;
}

.input-group-sm>.form-control {
    font-size: .75rem;
    padding: .25rem 1.5rem .25rem .5rem;
    font-variant-numeric: tabular-nums;
}

.form-control:disabled {
    background-color: transparent;
    border: none;
}

.form-control[readonly] {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--finbook-sub-light05);
    border-top: 1px solid transparent;
    border-radius: 0;
}
th > .form-control[readonly],
td > .form-control[readonly]  {
    background-color: transparent !important;
    border: none;
    border-bottom: 1px solid transparent;
    border-radius: 0;
}

textarea.form-control[readonly] {
    background-color: transparent;
    border: none;
    border-bottom: none !important;
    border-radius: 0;
}

.form-control::-moz-placeholder {
    color: var(--finbook-sub-light02);
}

.form-control::placeholder {
    color: var(--finbook-sub-light02);
}

.form-select {
    background-size: .75rem .75rem;
    padding: .375rem 1.625rem .375rem .25rem;
    border-radius: .0625rem !important;
}

.form-select-sm {
    padding-top: .375rem;
    padding-bottom: .375rem;
    font-size: .75rem;
    line-height: 1rem;
    border-radius: 0 !important;
}

.form-select-required {
    border-color: var(--bs-danger);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--finbook-main-light02);
    box-shadow: 0 0 0 0.1875rem rgba(51, 92, 132, .25) !important;
}

.form-label {
    font-size: .75rem;
    line-height: 1rem;
    color: var(--finbook-sub75);
    margin-bottom: 0;
    white-space: nowrap;
}

.col-form-label {
    font-size: .75rem;
    color: var(--finbook-sub75);
    font-weight: 600;
    white-space: nowrap;
}
.form-switch {
    padding-left: 2.125rem;
}
.form-switch .form-check-input {
    margin-left: -2.25rem;
}

.form-check-label {
    font-size: .75rem;
    white-space: nowrap;
    vertical-align: middle;
    color: var(--finbook-main-light02);
}

.form-check-inline {
    margin-right: .875rem;
}

.form-check-input[type=checkbox] {
    background-color: var(--bs-white);
    border: 1px solid var(--finbook-main-light04);
}

.form-check-input:checked {
    background-color: var(--finbook-main);
    border-color: var(--finbook-main);
}

.form-check-input:checked~.form-check-label,
.form-check-input[checked]~.form-check-label {
    color: var(--finbook-main-dark01);
    font-weight: 500;
}

.form-readonly {
    width: 100%;
    min-height: 1.875rem;
    font-size: .75rem;
    line-height: 1rem;
    padding: .4375rem .5rem;
    border-bottom: 1px solid var(--finbook-sub-light04);
}

.search {
    position: absolute;
    top: .25rem;
    right: .5rem;
}

.site-header {
    background: var(--finbook-main);
    position: sticky;
    top:0;
    width: 100%;
    z-index: 1002;
    -webkit-transition: .3s ease-in-out 0s;
    -o-transition: .3s ease-in-out 0s;
    -moz-transition: .3s ease-in-out 0s;
    -ms-transition: .3s ease-in-out 0s;
    transition: .3s ease-in-out 0s;
}

.site-header > .container-xxl {
    display: flex !important;
    justify-content: space-between !important;
    padding: .5rem 2.5rem;
    gap: 2.5rem;
    backdrop-filter: blur(1.5rem);
    -webkit-backdrop-filter: blur(1.5rem);
    color: var(--bs-white);
}

.site-header > .container-fluid {
    padding: .5rem 2.5rem;
    backdrop-filter: blur(1.5rem);
    -webkit-backdrop-filter: blur(1.5rem);
    color: var(--bs-white);
}

.site-branding {
    display: block;
    z-index: 21;
    width: 8.4375rem;
    height: 1.875rem;
}

.site-logo {
    height: 100%;
    background: url(./images/logo-en.svg) no-repeat center;
    background-size: contain;
    -webkit-transition: opacity .3s;
    -o-transition: opacity .3s;
    -moz-transition: opacity .3s;
    -ms-transition: opacity .3s;
    transition: opacity .3s
}

.site-branding-short {
    display: block;
    z-index: 21;
    width: 1.875rem;
    height: 1.875rem;
    cursor: pointer;
}

.site-logo-symbol {
    height: 100%;
    background: url(./images/logo-symbol.svg) no-repeat center;
    background-size: contain;
    -webkit-transition: opacity .3s;
    -o-transition: opacity .3s;
    -moz-transition: opacity .3s;
    -ms-transition: opacity .3s;
    transition: opacity .3s
}

.site-logo-symbol-mono {
    height: 100%;
    background: url(./images/logo-symbol-mono.svg) no-repeat center;
    background-size: contain;
    -webkit-transition: opacity .3s;
    -o-transition: opacity .3s;
    -moz-transition: opacity .3s;
    -ms-transition: opacity .3s;
    transition: opacity .3s
}

header+section,
header#clientHeader+section {
    padding-top: 1.125rem !important;
}

.title-client-info {
    font-size: 1.125rem !important;
    color: var(--bs-white);
}

.user-manage {
    font-size: .75rem;
    line-height: 1.875rem;
    ;
}

.nav {
    overflow: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    flex-wrap: nowrap;
}

.nav-tabs {
    border-bottom: 1px solid var(--finbook-main);
    gap: .125rem;
}

.nav-tabs .nav-link.active,
.nav-tabs .show>.nav-link {
    font-weight: 600;
    background-color: var(--finbook-main);
    color: var(--bs-white);
}

.nav-tabs .nav-link-sub,
.nav-tabs .show>.nav-link-sub {
    font-weight: 400;
    font-size: .75rem;
    padding: .375rem .875rem !important;
    margin: .45rem .01rem 0 .01rem;
    border-radius: .125rem .125rem 0 0 !important;
    background-color: var(--finbook-main-light05);
    color: var(--finbook-main);
    border-bottom: none !important;
}
.nav-tabs .nav-link-sub.active {
    font-weight: 400;
    color: var(--finbook-main-light06);
    background-color: var(--finbook-main-light01);
}

.nav-tabs .nav-link.active img,
.nav-tabs .show>.nav-link img,
.nav-tabs-admin .nav-link.active img,
.nav-tabs-admin .show>.nav-link img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(2796%) hue-rotate(108deg) brightness(103%) contrast(110%);
}

.nav-tabs-admin .nav-link:hover {
    background-color: var(--finbook-main-light01);
}

.nav-tabs-admin .nav-link:hover img {
    filter: invert(31%) sepia(58%) saturate(315%) hue-rotate(180deg) brightness(92%) contrast(83%);
}

.nav-link {
    font-size: .875rem;
    line-height: 1.5rem !important;
    color: var(--finbook-main-light01);
    padding: .625rem 1rem !important;
    border-top-left-radius: .125rem !important;
    border-top-right-radius: .125rem !important;
    white-space: nowrap;
    border: none !important;
}
.nav-link span {
    margin-left: .5rem;
}

.nav-link img {
    filter: brightness(0) saturate(100%) invert(54%) sepia(11%) saturate(1220%) hue-rotate(168deg) brightness(91%) contrast(83%);
    vertical-align: middle;
}

.nav-link:hover {
    background-color: var(--finbook-main-light03);
    border: none!important;
}

.nav-link:hover img {
    filter: brightness(0) saturate(100%) invert(14%) sepia(94%) saturate(1569%) hue-rotate(190deg) brightness(89%) contrast(105%);
}

.nav::-webkit-scrollbar {
    display: none;
}
.nav-pills .nav-link {
    font-size: .75rem;
    font-weight: 500;
    line-height: 1rem !important;
    padding: .5rem 1rem !important;
    border-radius: var(--bs-border-radius-xxl) !important;
}

.nav-pills .nav-link:hover,
.nav-pills .nav-link:focus {
    background-color: var(--finbook-sub-light05);
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    background-color: var(--finbook-sub75);
}

.tab-content {
    padding-top: 1rem;
}

.tw-client>.nav-item .nav-link {
    width: 12.5rem;
min-width: 12.5rem;
}
.nav-item .nav-link {
    cursor: pointer;
}
.sub-menu-titles {
    width: 12rem;
    height: 1.875rem;
    line-height: 1.875rem;
    font-size: 1rem;
    font-weight: 500;
}

.sumGroup {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
}

.sumGroup .totalSumWrap {
    height: 3.75rem;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    color: var(--finbook-main);
    padding: .375rem 0;
}

.sumGroup .totalSumWrap img {
    width: 2.25rem;
    height: 2.25rem;
    margin-right: .625rem;
}

.sumGroup .totalSumWrap .textWrap {
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    line-height: 1;
}

.sumGroup .totalSumWrap .textWrap small,
.sumGroup .sumWrap .textWrap small {
    font-weight: 300;
    margin: 0;
    opacity: .75;
    white-space: nowrap;
}

.sumGroup .sumWrap {
    height: 3.75rem;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    padding: .375rem 0;
}

.sumGroup .sumWrap:last-child {
    border-top-right-radius: .5rem;
    border-bottom-right-radius: .5rem;
}

.sumGroup .sumWrap img {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: .625rem;
}

.sumGroup .sumWrap .textWrap {
    flex-direction: column !important;
    font-size: .875rem;
    font-weight: 500;
    text-align: center;
    line-height: 1;
}

footer {
    font-size: .75rem;
    line-height: 1.875rem;
    color: var(--finbook-sub-light01);
    font-weight: 300;
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
}

footer .container-fluid hr,
footer .container-login hr,
footer .container-xxl hr,
hr {
    border-color: var(--finbook-main-light02);
}
hr.dashed {
    border: 1px dashed var(--finbook-sub-light02);
    margin: 0 !important;
}

footer em {
    font-style: normal;
    color: var(--finbook-sub75);
}

.container-login {
    background-color: var(--finbook-main-light05);
    height: 100%;
    align-content: center !important;
}

.container-login .login-wrap {
    width: 30rem;
    min-height: 22.5rem;
    background-color: var(--bs-white);
    border-radius: .25rem;
    margin-left: auto;
    margin-right: auto;
    padding: 3.75rem 5rem;
    display: flex;
    flex-direction: column;
}

.footer-login-wrap {
    width: 30rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1rem;
    text-align: center;
}

.title-login {
    margin: 1rem 0 2.5rem 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.container-login .form-label {
    font-size: .875rem;
    margin-bottom: 0;
}

.container-register {
    background-color: var(--finbook-main-light05);
    height: 100%;
    align-content: center !important;
}

.container-register .register-wrap {
    width: 45rem;
    min-height: 22.5rem;
    background-color: var(--bs-white);
    border-radius: .25rem;
    margin-left: auto;
    margin-right: auto;
    padding: 3.75rem 5rem;
    display: flex;
    flex-direction: column;
}

.main-board-wrap {
    min-width: 18.75rem;
}

.main-buttons-wrap {
    align-items: center !important;
    --bs-gutter-x: 1rem;
}

.main-board-title {
    color: var(--bs-emphasis-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.25rem;
    margin-bottom: .25rem;
    cursor: pointer;
    white-space: nowrap;
}

.main-board-title:hover {
    color: var(--bs-emphasis-color);
}

.main-board-title i {
    color: var(--finbook-main-light01);
    margin-right: .5rem;
}

.main-board-title:hover i {
    color: var(--finbook-main);
}

.main-board-content {
    width: 100%;
    display: flex;
    background-color: var(--finbook-main-light05);
    border-radius: 1.125rem;
    padding: .5rem .5rem;
    text-decoration: none;
    cursor: pointer;
}

.main-board-content div {
    color: var(--bs-emphasis-color);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: .25rem;
}

.main-board-content i {
    color: var(--bs-emphasis-color);
}

.board-view-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .875rem;
    font-weight: 600;
    padding: .5rem;
}

.board-view-title div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.board-view-title small {
    font-size: .75rem;
    font-weight: 300;
}

.board-view-info {
    background-color: var(--finbook-sub-light05);
    border-top: 1px solid var(--finbook-sub-light04);
    font-size: .75rem;
    padding: .25rem .5rem;
}

.board-view-info div > span,
.board-view-comment-info div > span {
    color: var(--finbook-sub-light01);
}

.board-view-contents {
    padding: 1rem;
}

.board-view-comment-wrap {
    font-size: .75rem;
    padding: 0;
    border-bottom: 1px solid var(--finbook-sub-light05);
    margin-bottom: 1.25rem;
}

.board-view-comment-info {
    padding: .25rem .5rem;
}

.comment-wrap {
    width: 100%;
    padding: .25rem .5rem;
    display: inline-flex;
}

.comment-writer {
    font-weight: 600;
    max-width: 7.5rem;
    width: 7.5rem;
}

.comment-content {
    width: 100%;
}

.comment-date {
    font-size: .6875rem;
    max-width: 150px;
    width: 150px;
    text-align: right;
    color: var(--finbook-sub75);
}

.number-comments {
    color: var(--finbook-main-light01);
    margin: 0 .5rem;
    font-weight: 300;
}

.board-write-wrap {
    border: 1px solid var(--finbook-sub-light05);
    margin-bottom: 1.25rem;
}

.editor-wrap {
    min-height: 32.5rem;
}
.note-editor .note-editing-area .note-editable {
    min-height: 29.125rem !important;
}

.board-write-comments-wrap {
    border-top: 1px solid var(--finbook-sub-light05);
    padding: .5rem;
    display: grid;
    row-gap: .5rem !important;
}

.file-input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-right: .5rem !important;
    border: 1px solid var(--finbook-sub-light04) !important;
    border-radius: .25rem;
}

.file-input-group label {
    width: 6.25rem;
    font-size: .75rem;
    font-weight: 300;
    color: var(--finbook-sub75);
    background-color: var(--finbook-sub-light05);
    padding: .375rem 1rem;
}

.file-input-group .file-input {
    width: calc(100% - 6.25rem);
    font-size: .75rem;
    font-weight: 300;
    padding: .375rem 1rem;
}

.file-input-group .file-input .text-placeholder {
    color: var(--finbook-sub-light02);
}

.file-input-group:hover,
.file-input-group:focus {
    border: 1px solid var(--finbook-sub-light01) !important;
}

.file-icon-color {
    color: var(--finbook-sub-light01);
}

.file-input-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.sub-title {
    border-left: 3px solid var(--finbook-main-light03);
    padding: 0 .75rem;
    margin: 0 .5rem;
    font-size: .875rem;
    line-height: 1.875rem;
    font-weight: 500;
}
.offcanvas {
    background-color: var(--bs-white);
}

.offcanvas-header {
    border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

.offcanvas-header h5 {
    margin-bottom: 0 !important;
}

.offcanvas-body {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    padding-top: 0;
}

.offcanvas-footer {
    background: var(--finbook-main-light05);
    justify-content: flex-end !important;
    gap: 1rem !important;
}
.offcanvas.offcanvas-top {
    height: fit-content;
}
.offcanvas-end.bb-offcanvas-lg {
    width: 85%;
}

.quick-menu-wrap {
    position: fixed;
    right: 0;
    top: 3.875rem;
    min-width: 3.125rem;
    float: right;
    margin-top: 1.5rem;
    margin-right: .5rem;
    z-index: 980;
}

.quick-menu-wrap .list-group {
    padding: 0;
    border-radius: .5rem;
}

.quick-menu-wrap .list-group .list-group-item {
    width: 100%;
    font-size: .6875rem;
    line-height: 1;
    white-space: nowrap;
    padding: .75rem .25rem;
    text-align: center;
    color: var(--finbook-sub75);
    background-color: rgba(255, 255, 255, .7);
    backdrop-filter: blur(1.5rem);
}

.quick-menu-wrap .list-group .list-group-item:hover,
.quick-menu-wrap .list-group .list-group-item:focus,
.quick-menu-wrap .list-group .list-group-item:active,
.quick-menu-wrap .list-group .list-group-item.active {
    color: var(--finbook-main-light01);
    font-weight: 600;
    background-color: rgba(255, 255, 255, .9);
    backdrop-filter: blur(1.5rem);
    border-color: var(--bs-list-group-border-color);
    cursor: pointer;
}

.quick-menu-wrap .list-group-item.disabled,
.quick-menu-wrap .list-group-item:disabled {
    color: var(--finbook-main-light01);
    background-color: var(--finbook-main-light05);
    border-color: var(--finbook-main-light03);
    font-weight: 600;
    padding: .625rem .25rem;
}

.anchor {
    display: block;
    height: 3.875rem;
    margin-top: -3.875rem;
    visibility: hidden;
}

.status-scrap-wrap {
    width: fit-content;
    padding: 1rem 1.5rem;
    border-radius: .5rem;
    overflow: hidden;
    background: var(--bs-white);
    margin-top: 1rem;
    box-shadow: 0 0 .25rem rgba(15, 36, 78, .18) !important;
}

.status-scrap-wrap td {
    font-size: .6875rem;
}

.card {
    border-radius: .5rem;
    border: none !important;
    box-shadow: 0 0 .125rem rgba(15, 36, 78, .1) !important;
}

.card-body {
    padding: 1.5rem;
}

.card-title {
    font-size: 1rem;
    margin-bottom: 1rem;
}

.bb-callout {
    font-size: .75rem;
    white-space: nowrap;
    background-color: var(--finbook-sub-light05);
    padding: 1.25rem 1rem ;
    border-left: 4px solid var(--finbook-sub-light03);
}


.modal {
    --bs-modal-header-padding: .875rem 1rem;
    --bs-modal-footer-gap: 2rem;
    --bs-modal-bg: var(--bs-white);
}

.modal-header {
    background-color: var(--finbook-main) !important;
    color: var(--bs-white) !important;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.modal-content {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.modal-footer {
    background: var(--finbook-main-light05);
    border-top: none;
}

.modal-confirmation .modal-footer .btn-secondary {
    --bs-btn-bg: transparent;
    --bs-btn-color: var(--finbook-sub75);
    --bs-btn-border-color: var(--finbook-sub-light01);
    --bs-btn-hover-color: var(--finbook-sub);
    --bs-btn-hover-bg: rgba(15, 36, 78, .05);
    --bs-btn-hover-border-color: var(--finbook-sub);
    --bs-btn-active-color: var(--finbook-sub);
    --bs-btn-active-bg: var(--bs-white);
    --bs-btn-active-border-color: var(--finbook-sub-light02);
    --bs-btn-disabled-color: var(--finbook-sub-light03);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--finbook-sub-light03);
    border-radius: var(--bs-border-radius-xl) !important;
    padding: .25rem 0;
    --bs-btn-font-size: 0.875rem;
}

.modal-confirmation .modal-footer .btn-primary,
.modal-confirmation .modal-footer .btn-warning,
.modal-confirmation .modal-footer .btn-danger,
.modal-confirmation .modal-footer .btn-dark {
    border-radius: var(--bs-border-radius-xl) !important;
    padding: .25rem 0;
    --bs-btn-font-size: 0.875rem;
}

.modal-confirmation .modal-body {
    font-size: .875rem;
}
.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
    border-top-right-radius: var(--bs-border-radius-sm);
    border-bottom-right-radius: var(--bs-border-radius-sm);
}

.dropdown-menu {
    width: 380px;
    background-color: #fff;
}

.dropdown-toggle::after {
	display:none
}
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--finbook-main-light06);
}


.note-editor.note-frame {
    border: none !important;
}

.note-editor.note-frame .note-status-output {
    color: var(--bs-dark) !important;
    border-top: 1px solid var(--finbook-sub-light05) !important;
}

.note-editor.note-frame .note-statusbar {
    background-color: var(--finbook-sub-light05) !important;
    border-top: 1px solid var(--finbook-sub-light05) !important;
}
.btn-wrap-sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 2.875rem;
    z-index: 850;
    background-color: rgba(255, 255, 255, .8);
    backdrop-filter: blur(1.5rem);
    padding: .25rem 0;
}
.batch-edit-sticky-top {
    position: sticky;
    top: 5.25rem;
    background-color: rgba(255, 255, 255, .8);
    backdrop-filter: blur(1.5rem);
    z-index: 800;
    display: flex !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: .5rem !important;
    margin: .5rem 0;
}
.position-relative {
    position: relative;
}

.position-absolute {
    position: absolute;
}

.pe-4 {
    padding-right: 1.5rem;
}

.btn-link {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}
.popup-content p,
.popup-content li {
    font-size: .875rem !important;
    line-height: 1.5;
    color: var(--finbook-sub75);
}
@media (min-width: 1200px) {
    .modal-xl {
        --bs-modal-width: 105.5rem !important;
    }
}

@media (max-width: 1200px) {

    .container-fluid,
    .container-xxl {
        padding-right: calc(var(--bs-gutter-x) * .5);
        padding-left: calc(var(--bs-gutter-x) * .5);
    }

    .site-header>.container-fluid,
    .site-header>.container-xxl {
        padding: .5rem;
    }
}

@media (min-width: 992px) {
    .modal-lg {
        --bs-modal-width: 56.25rem !important;
    }
}

@media (max-width: 992px) {
    header#clientHeader+section {
        padding-top: 1.625rem !important;
    }

    .site-branding {
        width: 1.875rem;
    }

    .site-logo {
        background: url(./images/logo-symbol.svg) no-repeat center;
    }

    .tw-client {
        width: auto;
        min-width: auto;
    }

    .title-client-info {
        font-size: .875rem !important;
        white-space: nowrap;
        overflow: hidden;
    }
    .sumGroup {
        width: 100%;
        margin-bottom: 1rem;
    }

    .sumGroup .totalSumWrap img {
        width: 1.25rem;
        height: 1.25rem;
        margin-right: .5rem;
    }
    .sumGroup .totalSumWrap .textWrap {
        font-size: .875rem;
    }

    .sumGroup .sumWrap img {
        width: 1rem;
        height: 1rem;
        margin-right: .5rem;
    }
    .sumGroup .sumWrap .textWrap {
        font-size: .75rem;
    }

    .container-login {
        background-color: var(--bs-white);
    }

    .main-board-wrap {
        width: 100%;
        max-width: 100%;
    }

    .board-view-title small {
        margin-top: .5rem;
    }

    .status-scrap-wrap {
        width: 100%;
    }

    .cat-list {
        margin-right: 0;
        width: 100%;
        margin-bottom: 1rem;
    }

    .chart-wrap {
        width: 100%;
        height: 340px;
        padding: 0;
    }

    .chart {
        min-height: 11.25rem;
    }
    .offcanvas-end.bb-offcanvas-lg {
        width: 100%;
    }
    .batch-edit-sticky-top {
        top: 9.625rem;
    }
}
@media (max-width: 768px) {
    .cat-list-sub {
        height: 240px;
        overflow-y: scroll;
    }
    .container-login .login-wrap {
        width: 100%;
        border-radius: 0;
        padding: 2.5rem 3.75rem;
    }

    .footer-login-wrap {
        width: 100%;
        padding: 2.5rem 3.75rem;
    }
    .manager-info {
        width: 100%;
    }
    .btn-wrap-sticky-top {
        top: 4.75rem;
    }
    .batch-edit-sticky-top {
        top: 13.875rem;
    }

}
@media (max-width: 576px) {

    .manager-info {
        position: absolute;
        top: 2.125rem;
        right: .5rem;
    }
    .batch-edit-sticky-top {
        top: 16.25rem;
    }
}