a {
    color: var(--bs-primary);
}

@font-face {
    font-family: "akrobat";
    src: url("../resource/akrobat-extrabold-webfont.ttf") format("truetype");
}

.layout-side {
    height: 100vh;
    padding-top: 10px;
    border-right: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 2px 0 2px 1px rgba(0, 0, 0, 0.1);
}

.layout-main {
    padding: 20px 10px 20px 10px;
    height: 100vh;
    overflow-y: auto;
}

.layout-logo {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    padding: 0 8px 8px 8px;
    margin-bottom: 8px;
    font-family: "akrobat", sans-serif;
    color: var(--bs-primary);
}

.menu .submenu .nav-link {
    border-radius: var(--bs-border-radius);
    padding: .5rem;
}

.card.clickable-card:hover {
    border: 1px solid var(--bb-border-hover-color);
    box-shadow: 0 .25rem .5rem #0000001a
}

/* theme settings below */
:root {
    --bs-gray: #7e8299;
    --bs-gray-dark: #3f4254;
    --bs-gray-100: #f5f8fa;
    --bs-gray-200: #eff2f5;
    --bs-gray-300: #e4e6ef;
    --bs-gray-400: #b5b5c3;
    --bs-gray-500: #a1a5b7;
    --bs-gray-600: #7e8299;
    --bs-gray-700: #5e6278;
    --bs-gray-800: #3f4254;
    --bs-gray-900: #181c32;
    --bs-light: #f5f8fa;
    --bs-primary: #4C536E;
    --bs-secondary: #e4e6ef;
    --bs-success: #50cd89;
    --bs-info: #7239ea;
    --bs-warning: #ffc700;
    --bs-danger: #f1416c;
    --bs-dark: #181c32;
    --bs-light-rgb: 245, 248, 250;
    --bs-primary-rgb: 0, 158, 247;
    --bs-secondary-rgb: 228, 230, 239;
    --bs-success-rgb: 80, 205, 137;
    --bs-info-rgb: 114, 57, 234;
    --bs-warning-rgb: 255, 199, 0;
    --bs-danger-rgb: 241, 65, 108;
    --bs-dark-rgb: 24, 28, 50;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-body-rgb: 24, 28, 50;
    --bs-body-color: #181c32;
    --bs-border-radius: .475rem;
    --bb-disabled-bg: #f5f8fa;
    --bs-border-color: var(--bs-secondary);
    --bb-border-focus-color: #b5b5c3;
    --bb-border-hover-color: #b5b5c3
}

.table-container {
    --bs-table-striped-bg: rgba(245, 248, 250, .75);
    --bs-table-hover-bg: #f5f8fa
}

.table-filter .card-header {
    border-bottom: 1px solid var(--bs-secondary);
    background-color: var(--bs-secondary)
}

.table-filter .card-arrow:after {
    border-bottom-color: var(--bs-secondary)
}

.picker-panel-footer {
    border-bottom-left-radius: var(--bs-border-radius);
    border-bottom-right-radius: var(--bs-border-radius)
}

.table-filter .card-arrow:before {
    border-bottom-color: var(--bs-secondary)
}

.btn-primary {
    --bs-btn-hover-bg: #0095e8;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
    --bs-btn-active-bg: var(--bs-btn-hover-bg);
    --bs-btn-active-border-color: var(--bs-btn-hover-bg)
}

.btn-secondary {
    --bs-btn-color: #3f4254;
    --bs-btn-hover-bg: #b5b5c3;
    --bs-btn-hover-color: var(--bs-btn-color);
    --bs-btn-active-color: var(--bs-btn-color);
    --bs-btn-disabled-color: var(--bs-btn-color);
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-disabled-bg: var(--bs-secondary);
    --bs-btn-disabled-border-color: var(--bs-secondary);
    --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
    --bs-btn-active-bg: var(--bs-btn-hover-bg);
    --bs-btn-active-border-color: var(--bs-btn-hover-bg)
}

.btn-success {
    --bs-btn-hover-bg: #47be7d;
    --bs-btn-bg: var(--bs-success);
    --bs-btn-border-color: var(--bs-success);
    --bs-btn-disabled-bg: var(--bs-success);
    --bs-btn-disabled-border-color: var(--bs-success);
    --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
    --bs-btn-active-bg: var(--bs-btn-hover-bg);
    --bs-btn-active-border-color: var(--bs-btn-hover-bg)
}

.btn-info {
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #5014d0;
    --bs-btn-hover-color: var(--bs-btn-color);
    --bs-btn-active-color: var(--bs-btn-color);
    --bs-btn-disabled-color: var(--bs-btn-color);
    --bs-btn-bg: var(--bs-info);
    --bs-btn-border-color: var(--bs-info);
    --bs-btn-disabled-bg: var(--bs-info);
    --bs-btn-disabled-border-color: var(--bs-info);
    --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
    --bs-btn-active-bg: var(--bs-btn-hover-bg);
    --bs-btn-active-border-color: var(--bs-btn-hover-bg)
}

.btn-warning {
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #f1bc00;
    --bs-btn-hover-color: var(--bs-btn-color);
    --bs-btn-active-color: var(--bs-btn-color);
    --bs-btn-disabled-color: var(--bs-btn-color);
    --bs-btn-bg: var(--bs-warning);
    --bs-btn-border-color: var(--bs-warning);
    --bs-btn-disabled-bg: var(--bs-warning);
    --bs-btn-disabled-border-color: var(--bs-warning);
    --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
    --bs-btn-active-bg: var(--bs-btn-hover-bg);
    --bs-btn-active-border-color: var(--bs-btn-hover-bg)
}

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

.btn-dark {
    --bs-btn-hover-bg: #131628;
    --bs-btn-bg: var(--bs-dark);
    --bs-btn-border-color: var(--bs-dark);
    --bs-btn-disabled-bg: var(--bs-dark);
    --bs-btn-disabled-border-color: var(--bs-dark);
    --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
    --bs-btn-active-bg: var(--bs-btn-hover-bg);
    --bs-btn-active-border-color: var(--bs-btn-hover-bg)
}

.btn-light {
    --bs-btn-color: #212529;
    --bs-btn-hover-color: var(--bs-btn-color);
    --bs-btn-active-color: var(--bs-btn-color);
    --bs-btn-disabled-color: var(--bs-btn-color);
    --bs-btn-bg: var(--bs-light);
    --bs-btn-border-color: var(--bs-light);
    --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
    --bs-btn-active-bg: var(--bs-btn-hover-bg);
    --bs-btn-active-border-color: var(--bs-btn-hover-bg)
}

.btn-link {
    text-decoration: none;
    --bs-btn-color: var(--bs-primary);
    --bs-btn-hover-color: #0095e8
}

.btn-outline-primary {
    --bs-btn-hover-bg: #0095e8;
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-disabled-color: var(--bs-btn-color);
    --bs-btn-disabled-border-color: var(--bs-btn-color);
    --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
    --bs-btn-active-bg: var(--bs-btn-hover-bg);
    --bs-btn-active-border-color: var(--bs-btn-hover-bg)
}

.btn-outline-secondary {
    --bs-btn-hover-bg: #b5b5c3;
    --bs-btn-color: #b5b5c3;
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
    --bs-btn-disabled-color: var(--bs-btn-border-color);
    --bs-btn-disabled-border-color: var(--bs-btn-border-color);
    --bs-btn-active-bg: var(--bs-btn-hover-bg);
    --bs-btn-active-border-color: var(--bs-btn-hover-bg)
}

.btn-outline-success {
    --bs-btn-hover-bg: #47be7d;
    --bs-btn-color: var(--bs-success);
    --bs-btn-border-color: var(--bs-success);
    --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
    --bs-btn-disabled-color: var(--bs-btn-border-color);
    --bs-btn-disabled-border-color: var(--bs-btn-border-color);
    --bs-btn-active-bg: var(--bs-btn-hover-bg);
    --bs-btn-active-border-color: var(--bs-btn-hover-bg)
}

.btn-outline-info {
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #5014d0;
    --bs-btn-color: var(--bs-info);
    --bs-btn-border-color: var(--bs-info);
    --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
    --bs-btn-disabled-color: var(--bs-btn-border-color);
    --bs-btn-disabled-border-color: var(--bs-btn-border-color);
    --bs-btn-active-bg: var(--bs-btn-hover-bg);
    --bs-btn-active-border-color: var(--bs-btn-hover-bg)
}

.btn-outline-warning {
    --bs-btn-hover-bg: #f1bc00;
    --bs-btn-color: var(--bs-warning);
    --bs-btn-border-color: var(--bs-warning);
    --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
    --bs-btn-disabled-color: var(--bs-btn-border-color);
    --bs-btn-disabled-border-color: var(--bs-btn-border-color);
    --bs-btn-active-bg: var(--bs-btn-hover-bg);
    --bs-btn-active-border-color: var(--bs-btn-hover-bg)
}

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

.btn-outline-dark {
    --bs-btn-hover-bg: #131628;
    --bs-btn-color: var(--bs-dark);
    --bs-btn-border-color: var(--bs-dark);
    --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
    --bs-btn-disabled-color: var(--bs-btn-border-color);
    --bs-btn-disabled-border-color: var(--bs-btn-border-color);
    --bs-btn-active-bg: var(--bs-btn-hover-bg);
    --bs-btn-active-border-color: var(--bs-btn-hover-bg)
}

.btn-outline-link {
    --bs-btn-hover-bg: #fff;
    --bs-btn-border-color: #e9ecef;
    --bs-btn-color: var(--bs-primary);
    --bs-btn-hover-color: var(--bs-primary);
    --bs-btn-disabled-color: var(--bs-btn-border-color);
    --bs-btn-disabled-border-color: var(--bs-btn-border-color);
    --bs-btn-active-bg: var(--bs-btn-hover-bg);
    --bs-btn-active-border-color: var(--bs-btn-hover-bg)
}

.btn-outline-light {
    --bs-light: #dcdfe6;
    --bs-btn-color: var(--bs-light);
    --bs-btn-border-color: var(--bs-light);
    --bs-btn-disabled-color: var(--bs-btn-border-color);
    --bs-btn-disabled-border-color: var(--bs-btn-border-color);
    --bs-btn-hover-border-color: #b5b5c3;
    --bs-btn-active-border-color: #b5b5c3
}

.input-group .form-control:not(.invalid):not(.valid):hover {
    border-color: #b5b5c3
}

.alert-primary {
    --bs-alert-color: #f5f8fa;
    --bs-alert-bg: #4C536E;
    --bs-alert-border-color: #4C537F
}

.alert-primary .alert-link {
    --bs-alert-color: #f5f8fa
}

.alert-secondary {
    --bs-alert-color: #3f4254;
    --bs-alert-bg: #e4e6ef;
    --bs-alert-border-color: #fafaff
}

.alert-secondary .alert-link {
    --bs-alert-color: #3f4254
}

.alert-success {
    --bs-alert-color: #205237;
    --bs-alert-bg: #dcf5e7;
    --bs-alert-border-color: #cbf0dc
}

.alert-success .alert-link {
    --bs-alert-color: #1a422c
}

.alert-info {
    --bs-alert-color: #44228c;
    --bs-alert-bg: #e3d7fb;
    --bs-alert-border-color: #d5c4f9
}

.alert-info .alert-link {
    --bs-alert-color: #361b70
}

.alert-warning {
    --bs-alert-color: #665000;
    --bs-alert-bg: #fff4cc;
    --bs-alert-border-color: #ffeeb3
}

.alert-warning .alert-link {
    --bs-alert-color: #524000
}

.alert-danger {
    --bs-alert-color: #912741;
    --bs-alert-bg: #fcd9e2;
    --bs-alert-border-color: #fbc6d3
}

.alert-danger .alert-link {
    --bs-alert-color: #741f34
}

.alert-dark {
    --bs-alert-color: #0e111e;
    --bs-alert-bg: #d1d2d6;
    --bs-alert-border-color: #babbc2
}

.alert-dark .alert-link {
    --bs-alert-color: #0b0e18
}

.alert-bar.alert-info {
    --bs-alert-bg: #e3d7fb
}

.alert-bar.alert-success {
    --bs-alert-bg: #dcf5e7
}

.alert-bar.alert-primary {
    --bs-alert-bg: #ccecfd
}

.alert-bar.alert-warning {
    --bs-alert-bg: #fff4cc
}

.alert-bar.alert-danger {
    --bs-alert-bg: #fcd9e2
}

.modal-backdrop.show {
    opacity: .3
}

.modal-content {
    box-shadow: 0 .25rem .5rem #0000001a
}

.page-item:first-child .page-link {
    border-top-left-radius: var(--bs-border-radius);
    border-bottom-left-radius: var(--bs-border-radius)
}

.page-item:last-child .page-link {
    border-top-right-radius: var(--bs-border-radius);
    border-bottom-right-radius: var(--bs-border-radius)
}

.page-item.active .page-link {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary)
}

.page-item:not(.active) .page-link:hover {
    color: var(--bs-primary)
}

.table {
    --bs-table-striped-color: #181c32;
    --bs-table-striped-bg: rgba(245, 248, 250, .75);
    --bs-table-active-color: #181c32;
    --bs-table-active-bg: #f5f8fa;
    --bs-table-hover-color: #181c32;
    --bs-table-hover-bg: #f5f8fa;
    --bs-table-border-color: #eff2f5
}

.table > :not(:last-child) > :last-child > * {
    border-bottom-color: var(--bs-secondary)
}

.menu .nav-link {
    color: #3f4254;
    font-weight: 500
}

.menu .nav .dropdown-menu .nav-link:not(.disabled):hover,
.menu .nav .dropdown-menu .nav-link.active,
.menu .submenu .nav-link.active,
.menu .submenu .nav-link:not(.disabled):hover,
.cascade .dropdown-item:not(.disabled):hover,
.cascade .dropdown-item.active,
.cascade .nav .nav-link:not(.disabled):hover,
.cascade .nav .nav-link.active {
    background-color: var(--bs-primary);
    color: var(--bs-gray-100)
}

.form-control.is-valid,
.was-validated .form-control:valid {
    border-color: var(--bs-success)
}

.was-validated .form-control:valid:focus,
.form-control.is-valid:focus,
.was-validated .custom-select:valid:focus,
.custom-select.is-valid:focus {
    border-color: var(--bs-success);
    box-shadow: none
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: var(--bs-danger)
}

.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus,
.was-validated .custom-select:invalid:focus,
.custom-select.is-invalid:focus {
    border-color: var(--bs-danger);
    box-shadow: none
}

.table-filter .filter-item {
    border-color: var(--bs-secondary)
}

.dropdown-menu {
    --bs-dropdown-item-padding-y: 6px;
    --bs-dropdown-item-padding-x: 20px
}

.select {
    --bb-select-disabled-bg: #f5f7fa
}

.tree-view {
    --bb-tree-item-hover-color: var(--bs-primary)
}

.btn-xs,
.btn-group-xs > .btn {
    --bs-btn-border-radius: .375rem
}

.accordion {
    --bs-accordion-active-bg: var(--bs-secondary);
    --bs-accordion-btn-padding-x: 1rem;
    --bs-accordion-btn-padding-y: .5rem
}

@media (prefers-reduced-motion: reduce) {
    .btn {
        transition: none
    }
}