/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/Other/CascadeStyleSheet.css to edit this template
*/
/* 
    Created on : 2 Jan. 2023, 9:18:27 pm
    Author     : Days
*/

body {
    font-family: var(--body-font_family);
    height: 100%;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    background: var(--body-background-color);
    color: var(--body-text-color);
    font-size: var(--body-font_size);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Shell layout metrics (overridden per breakpoint in responsive.css) */
:root {
    --nav_top-height: 52px;
    --footer-height: 40px;
    --nav_side-width: 200px;

    /* Shell surfaces (light defaults; core-dark.css overrides) */
    --shell-surface: #ffffff;
    --shell-surface-text: rgba(var(--black-color), 0.9);
    --shell-muted-text: rgba(var(--black-color), 0.6);
    --shell-border: rgba(0, 0, 0, 0.08);
    --shell-hover: rgba(var(--black-color), 0.06);
    --shell-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(0, 0, 0, 0.04);
    --shell-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.08);
    --shell-radius: 10px;
    --card-radius: 6px;
    --shell-scrollbar: rgba(0, 0, 0, 0.18);

    /* Footer */
    --footer-background: var(--shell-surface);
    --footer-text: #444;
    --footer-border: #e6e6e6;

    /* Side nav details */
    --nav_side-icon-default: #e9ecef;
    --nav_side-guide: rgba(0, 0, 0, 0.08);
    --nav_side-chevron: rgb(var(--gray-dark-color));
}

html {
    height: -webkit-fill-available;
    height: 100%;
    margin: 0;
    padding: 0;
}

main {
    height: auto;
    min-height: calc(100% - 52px);
    min-height: -o-calc(100% - 52px);
    /* opera */
    min-height: -webkit-calc(100% - 52px);
    /* google, safari */
    min-height: -moz-calc(100% - 52px);
    /* firefox */
    overflow-x: auto;
    overflow-y: auto;
}

.container-fluid {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

a {
    text-decoration: none;
}

hr {
    border-top: 1px solid var(--shell-border);
    opacity: 1;
}

.body-container {
    display: block;
    z-index: 2;
}

/* App frame: header (sticky) + [side nav (sticky, own scroll) | body] + footer (fixed) */
.app-frame {
    padding-left: 0;
    padding-right: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.app-row {
    --bs-gutter-x: 0;
    display: flex;
    flex-wrap: nowrap;
    flex: 1 1 auto;
    margin-left: 0;
    margin-right: 0;
}

.app-row > .col-nav-body {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    max-width: none;
}

/* Wide content (tables, charts) scrolls inside the body instead of widening the page */
.app-frame .body-container {
    overflow-x: auto;
    padding-bottom: calc(var(--footer-height) + 1rem) !important;
}

.footer {
    font-size: 12px;
    background: var(--footer-background);
    color: var(--footer-text);
    border-color: var(--footer-border);
    border-top: 1px solid var(--footer-border);
    z-index: 1025;
}

.footer label,
.footer a {
    color: var(--footer-text);
}

/* Bootstrap .bg-light is !important; route it through the theme variable */
.footer.bg-light {
    background-color: var(--footer-background) !important;
}

/* footer-content is offset by the side-nav width; let it shrink instead of overflowing */
.footer .footer-content {
    width: auto !important;
    align-self: stretch;
    min-width: 0;
}

.footer label {
    font-size: 12px;
    font-weight: 400;
}

.logo-footer {
    max-width: 100%;
    max-height: 30px;
}

.text-light {
    color: rgb(var(--white-color)) !important;
}

.text-dark {
    color: rgba(var(--black-color), 0.9) !important;
}

/*TOP NAV BAR */
.nav_top {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    padding-left: 4px;
    padding-right: 8px;
    height: var(--nav_top-height);
    min-height: var(--nav_top-height);
    color: var(--nav_top-text_color);
    background-color: var(--nav_top-background);
    -webkit-box-shadow: 0 2px 2px rgb(0 0 0 / 5%), 0 1px 0 rgb(0 0 0 / 5%);
    box-shadow: 0 2px 2px rgb(0 0 0 / 5%), 0 1px 0 rgb(0 0 0 / 5%);
    z-index: 1020;
}

.nav_top-left,
.nav_top-right {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 100%;
    min-width: 0;
}

.nav_top-right {
    margin-left: auto;
}

.nav_top a,
.nav_top i {
    color: var(--nav_top-text_color);
    text-decoration: none;
}

.nav_top .nav-logo {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 6px;
    margin-right: 4px;
}

.nav_top .nav-logo img {
    max-height: 40px;
    max-width: 100%;
    display: block;
}

/* Unified 40px hit-target buttons */
.nav_top-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.nav_top-btn i {
    font-size: 18px;
    line-height: 1;
}

.nav_top-btn:hover,
.nav_top-btn:focus-visible,
.nav_top-btn[aria-expanded="true"] {
    background: var(--nav_top-item-background-hover);
    outline: none;
}

.nav_top-btn.nav_top-toggle {
    min-width: 44px;
}

/* Count badge on status buttons (mail / imports) */
.nav_top-btn-badge {
    position: relative;
    margin-right: 10px; /* room for the count badge before the next control */
}

.nav_top-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    transform: translate(45%, -35%);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    color: #fff;
    border: 2px solid var(--nav_top-background);
    box-sizing: content-box;
    pointer-events: none;
}

/* Company switcher */
.nav_top-company-toggle {
    max-width: 260px;
    font-weight: 600;
    font-size: 15px;
    padding: 0 12px;
}

.nav_top-company-toggle .nav_top-company-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav_top-company-toggle .nav_top-caret {
    font-size: 11px;
    opacity: .75;
}

.nav_top-companies {
    display: flex;
    flex-direction: row-reverse; /* keeps the historical left-to-right order users are used to */
    align-items: center;
    gap: 2px;
    height: 100%;
    margin: 0 4px;
    min-width: 0;
    overflow: hidden;
}

.nav_top-company {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color .15s ease;
}

.nav_top-company:hover {
    background: var(--nav_top-item-background-hover);
}

.nav_top-company.active {
    background-color: var(--nav_top-company_active-background);
    color: rgb(var(--nav_top-company_active-text_color));
}

.nav_top-companies-menu {
    width: 240px;
    max-height: 70vh;
    overflow-y: auto;
}

.nav_top-companies-menu table {
    margin-bottom: 0;
}

.nav_top-companies-menu td {
    padding: 0 !important;
    border: 0;
}

.nav_top-companies-menu .dropdown-item.active {
    background-color: var(--nav_top-company_active-background);
}

/* User avatar */
.nav_top-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: 4px;
    border-radius: 50%;
    transition: box-shadow .15s ease;
}

.nav_top-avatar img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    background: #fff;
    box-shadow: 0 0 0 2px var(--shell-surface), 0 0 0 3px rgba(0, 0, 0, .15);
}

.nav_top-avatar:hover img,
.nav_top-avatar[aria-expanded="true"] img {
    box-shadow: 0 0 0 2px var(--shell-surface), 0 0 0 4px var(--active-color);
}

/* Dropdown menus hanging off the top bar */
.nav_top .nav_top-menu {
    margin-top: 6px !important;
    min-width: 220px;
    padding: 6px;
    background: var(--shell-surface);
    border: 1px solid var(--shell-border);
    border-radius: var(--shell-radius);
    box-shadow: var(--shell-shadow-lg);
}

.nav_top .nav_top-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 14px;
    color: var(--shell-surface-text);
}

.nav_top .nav_top-menu .dropdown-item i {
    width: 18px;
    text-align: center;
    font-size: 14px;
    color: var(--shell-muted-text);
}

.nav_top .nav_top-menu .dropdown-item:hover,
.nav_top .nav_top-menu .dropdown-item:focus {
    background: var(--shell-hover);
    color: var(--shell-surface-text);
}

.nav_top .nav_top-menu .dropdown-item.active,
.nav_top .nav_top-menu .dropdown-item.active i {
    color: #fff;
}

.nav_top .nav_top-menu .dropdown-divider {
    margin: 4px 0;
}

.nav_top .nav_top-menu-footer {
    padding: 6px 10px 2px;
    text-align: right;
}

.nav_top .nav_top-menu-footer a {
    font-size: 11px;
    color: var(--shell-muted-text);
}

.nav_top .nav_top-menu .dropdown-divider {
    border-color: var(--shell-border);
    opacity: 1;
}

/* Legacy aliases kept for modules that still use them */
.nav_top .user-menu a,
.nav_top .user-menu i {
    color: var(--shell-surface-text);
    text-decoration: none;
}

.nav_top-item,
.nav_top-basic {
    align-self: stretch;
    display: flex;
    align-items: center;
}

.nav_top-item:hover,
.nav_top-basic:hover {
    color: var(--nav_top-item-color-hover);
    background: var(--nav_top-item-background-hover);
}

.nav_top-item.active {
    background-color: var(--nav_top-company_active-background);
}

.nav_top-item.active a {
    color: rgb(var(--nav_top-company_active-text_color));
}

/* Container modules inject custom buttons into (#topnav-custom) */
.nav_top-button {
    display: flex;
    align-items: center;
    height: 100%;
}

.nav_top-button:empty {
    display: none;
}

.nav_top-button > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 10px;
    border-radius: 8px;
}

.nav_top-button > a:hover {
    background: var(--nav_top-item-background-hover);
}

.nav_top-button .px-navbar-icon {
    font-size: 18px !important;
}

.nav_top-button .px-navbar-label {
    position: static;
    top: auto;
    margin: 0;
    padding: 2px 8px !important;
    border-radius: 9px;
    font-size: 11px !important;
    line-height: 14px;
}

.dropdown-toggle {
    outline: 0;
}

.btn-toggle {
    padding: .25rem .5rem;
    font-weight: 600;
    color: rgba(0, 0, 0, .65);
    background-color: transparent;
}

.btn-toggle:hover,
.btn-toggle:focus {
    color: rgba(0, 0, 0, .85);
    background-color: #d2f4ea;
}

.btn-toggle::before {
    width: 1.25em;
    line-height: 0;
    content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
    transition: transform .35s ease;
    transform-origin: .5em 50%;
}

.btn-toggle[aria-expanded="true"] {
    color: rgba(0, 0, 0, .85);
}

.btn-toggle[aria-expanded="true"]::before {
    transform: rotate(90deg);
}

.btn-toggle-nav a {
    padding: .1875rem .5rem;
    margin-top: .125rem;
    margin-left: 1.25rem;
}

.btn-toggle-nav a:hover,
.btn-toggle-nav a:focus {
    background-color: #d2f4ea;
}

.scrollarea {
    overflow-y: auto;
}

/* LEFT NAV BAR */
.col-nav-side {
    flex: 0 0 var(--nav_side-width);
    width: var(--nav_side-width);
    max-width: var(--nav_side-width);
    position: -webkit-sticky;
    position: sticky;
    top: var(--nav_top-height);
    align-self: flex-start;
    height: calc(100vh - var(--nav_top-height) - var(--footer-height));
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    background-color: var(--nav_side-background);
    z-index: 1015;
}

.col-nav-side::-webkit-scrollbar {
    width: 6px;
}

.col-nav-side::-webkit-scrollbar-thumb {
    background: var(--shell-scrollbar);
    border-radius: 3px;
}

.nav-side {
    background-color: var(--nav_side-background);
    font-size: 13px;
    height: auto;
    min-height: 100%;
    z-index: 3;
}

.nav-side-spacer {
    flex: 0 0 16px;
    height: 16px;
}

/* Backdrop behind the mobile drawer (only shown <= 768px) */
.nav-side-backdrop {
    display: none;
}

.nav-side .nav-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin: 0 !important;
    width: 26px !important;
    height: 26px !important;
    line-height: 26px !important;
    border-radius: 7px;
    font-size: 12px;
    background: var(--nav_side-icon-default);
    text-align: center !important;
    color: white !important;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}

/* Processes configured with a white tile would otherwise be invisible */
.nav-side .nav-icon.bg-white {
    color: rgba(var(--black-color), 0.75) !important;
    box-shadow: inset 0 0 0 1px rgb(var(--gray-color));
}

.nav-side .side-item {
    position: relative;
    align-items: center;
    margin: 1px 8px;
    padding: 0;
    border-radius: 8px;
    color: var(--nav_side-item_a-text);
    transition: background-color .15s ease;
}

.nav-side .side-item a {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 8px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--nav_side-item_a-text);
    outline: none;
}

.nav-side .side-item .px-nav-label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.nav-side .side-item:hover,
.nav-side .side-item:focus-within {
    background: var(--nav_side-item_active-background);
}

.nav-side .side-item.active {
    background: var(--nav_side-item_active-background);
}

.nav-side .side-item.active > a {
    font-weight: 600;
}

/* Accent bar for the current page */
.nav-side .side-item.active::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--active-color);
}

/* Group headers */
.nav-side .side-item.multi {
    cursor: pointer;
}

.nav-side .side-item.multi:focus-visible {
    box-shadow: 0 0 0 2px var(--active-color);
}

.nav-side .side-item.multi.open {
    background: transparent;
}

.nav-side .side-item.multi.open > a .px-nav-label {
    font-weight: 600;
}

.nav-side .multi-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-right: 4px;
    flex: 0 0 auto;
}

.multi-icon {
    font-size: 9px;
    color: var(--nav_side-chevron);
    transition: transform .2s ease;
}

/* Sub items: indented with a guide line */
.nav-side .nav-group {
    display: block;
}

.nav-side .side-item.sub {
    margin-left: 22px;
    background: transparent;
}

.nav-side .side-item.sub > a {
    padding: 4px 8px;
}

.nav-side .side-item.sub .nav-icon {
    width: 22px !important;
    height: 22px !important;
    line-height: 22px !important;
    font-size: 10px;
    border-radius: 6px;
}

.nav-side .side-item.sub::after {
    content: "";
    position: absolute;
    left: -12px;
    top: -2px;
    bottom: -2px;
    width: 1px;
    background: var(--nav_side-guide);
}

.nav-side .side-item.sub:hover,
.nav-side .side-item.sub:focus-within,
.nav-side .side-item.sub.active {
    background: var(--nav_side-item_sub_active-background);
}

/* Collapse / expand button pinned to the bottom of the nav column */
.nav-side-collapse {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    border: 0;
    border-top: 1px solid var(--nav_side-guide);
    background: var(--nav_side-background);
    color: var(--nav_side-item_a-text);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    opacity: .8;
    transition: opacity .15s ease, background-color .15s ease;
}

.nav-side-collapse:hover,
.nav-side-collapse:focus-visible {
    opacity: 1;
    background: var(--nav_side-item_active-background);
    outline: none;
}

.nav-side-collapse i {
    width: 26px;
    text-align: center;
    font-size: 13px;
}



/* little chevron multi
.nav-side .multi .nav-animate > a:after {
    -webkit-transition: all .3s;
    transition: all .3s;
}

.nav-side .multi .nav-open>a:after {
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
}

.nav-side .multi >a:after {
    position: absolute;
    top: 50%;
    right: 22px;
    display: block;
    width: 5px;
    height: 5px;
    margin-top: -2px;
    content: '';
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    border-width: 1px 1px 0 0;
    border-style: solid;
}
*/

.flexbox {
    display: flex !important;
    -webkit-transition: all .3s linear 0s;
    transition: all .3s linear 0s;
}

.hidden {
    display: none !important;
    -webkit-transition: all .3s linear 0s;
    transition: all .3s linear 0s;
}

/* Form */
::placeholder {
    color: rgba(191, 191, 191, .87) !important;
}

.form-control:focus {
    box-shadow: var(--input-form_control-box_shadow-focus);
}

.form-label {
    font-size: 13px;
    margin-bottom: 2px;
}

select:focus,
input:focus,
button:focus {
    box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    border-color: rgba(81, 203, 238, 1) !important;
}

/*Label*/
.px-navbar-label {
    position: relative;
    top: 10px;
    display: inline-block;
    float: none;
    margin: 0 0 0 -8px;
    padding: 0 2px;
    vertical-align: top;
    font-size: 8px;
    font-weight: 700;
    line-height: 10px;
}

form label {
    font-weight: 500 !important;
}

.label {
    white-space: nowrap;
    text-align: center;
    border-radius: 0.25em;
}

.label-success {
    border-color: rgba(var(--green-dark-color), 1);
    background: rgba(var(--green-color), 0.8);
    color: #fff;
}

.label-warning {
    border-color: rgba(var(--yellow-dark-color), 1);
    background: rgba(var(--yellow-color), 0.8);
    color: #fff;
}

.label-error {
    border-color: rgba(var(--red-dark-color), 1);
    background: rgba(var(--red-color), 0.8);
    color: #fff;
}

/*Input*/
input:read-only:not([type=radio]):not([type=checkbox]):not([type=button]):not([type=submit]) {
    cursor: not-allowed;
    opacity: .85 !important;
    background: #f5f5f5 !important;
}

.input-error {
    border-color: #e0b4b4 !important;
    color: #9f3a38 !important;
    background: #fff6f6 !important;
}

input {
    padding-right: 0px !important;
}

.ui.selection.uidropdown .menu>.item {
    font-size: 12px !important;
    padding: 8px 12px !important;
    border-bottom: 1px #eee solid;
}

.ui.icon.input button {
    margin-left: -21px;
    background-color: transparent;
    font-size: 8px;
    border: none;
}

.form-xs .ui.selection.uidropdown,
.form-xs .ui.selection.dropdown {
    font-size: 10px;
}

.form-xs input,
.form-xs select,
.form-xs textarea,
.input-xs {
    font-size: 10px;
    padding: 4px 0px 4px 3px !important;
}

.form-sm .ui.selection.uidropdown,
.form-sm .ui.selection.dropdown {
    font-size: 12px;
}

.form-sm input,
.form-sm select,
.form-sm textarea,
.input-sm {
    font-size: 12px;
    padding: 5px 0px 5px 3px !important;
}

.form-md .ui.selection.uidropdown,
.form-md .ui.selection.dropdown {
    font-size: 14px !important;
}

.ui.selection.uidropdown.search>input.search,
.ui.multiple.search.uidropdown>input.search {
    width: 100% !important;
    margin: 0px !important;
    padding-left: 14px !important;
    padding-top: 10px !important;
}

.form-md input,
.form-md select,
.form-md textarea,
.input-md {
    font-size: 14px !important;
    padding: 7px 0px 7px 4px !important;
}

.form-lg .ui.selection.uidropdown,
.form-lg .ui.selection.dropdown {
    font-size: 16px !important;
}

.form-lg input,
.form-lg select,
.form-lg textarea .input-lg {
    font-size: 16px !important;
    padding: 8px 0px 8px 6px !important;
}

.form-xl .ui.selection.uidropdown,
.form-xl .ui.selection.dropdown {
    font-size: 20px !important;
}

.form-xl input,
.form-xl select,
.form-xl textarea,
.input-xl {
    font-size: 20px !important;
    padding: 10px 0px 10px 8px !important;
}

/* Buttons */
.xs {
    --button-font_size: 7px;
    --button-padding: 4px 6px;
}

.tiny {
    --button-font_size: 8px;
    --button-padding: 6px 8px;
}

.small {
    --button-font_size: 10px;
    --button-padding: 6px 8px;
}

.big {
    --button-font_size: 16px;
    --button-padding: 10px 14px;
}

.button {
    cursor: pointer;
    display: inline-block;
    font-size: var(--button-font_size);
    padding: var(--button-padding);
    min-height: 1em;
    outline: 0;
    border: none;
    vertical-align: baseline;
    color: var(--button-text-color);
    background-color: var(--button-background-color);
    margin: 0;
    text-transform: none;
    text-shadow: none;
    font-weight: 500;
    line-height: 1em;
    font-style: normal;
    text-align: center;
    text-decoration: none;
    border-radius: 0.28571429rem;
    -webkit-box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgb(34 36 38 / 15%) inset;
    box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgb(34 36 38 / 15%) inset;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: opacity .1s ease, background-color .1s ease, color .1s ease, background .1s ease, -webkit-box-shadow .1s ease;
    transition: opacity .1s ease, background-color .1s ease, color .1s ease, background .1s ease, -webkit-box-shadow .1s ease;
    transition: opacity .1s ease, background-color .1s ease, color .1s ease, box-shadow .1s ease, background .1s ease;
    transition: opacity .1s ease, background-color .1s ease, color .1s ease, box-shadow .1s ease, background .1s ease, -webkit-box-shadow .1s ease;
    will-change: '';
    -webkit-tap-highlight-color: transparent;
}

/*## TABLES ##*/
tbody,
td,
tfoot,
th,
thead,
tr {
    border-color: rgba(var(--gray-color), 0.6) !important;
}

.table th {
    font-size: var(--table-th-font_size);
}

.table td {
    font-size: var(--table-td-font_size);
}

/*Position Table*/
.table-valign-middle td,
.table-valign-top th {
    vertical-align: middle !important;
}

.table-valign-top td,
.table-valign-top th {
    vertical-align: top !important;
}

/*Table Condensed*/
.table-condensed-0 td,
.table-condensed-0 th {
    padding: 0px !important;
}

.table-condensed-1 td,
.table-condensed-1 th {
    padding: 1px !important;
}

.table-condensed-2 td,
.table-condensed-2 th {
    padding: 2px !important;
}

.table-condensed-3 td,
.table-condensed-3 th {
    padding: 3px !important;
}

.table-condensed-4 td,
.table-condensed-4 th {
    padding: 4px !important;
}

.table-condensed-5 td,
.table-condensed-5 th {
    padding: 5px !important;
}

.table-condensed-6 td,
.table-condensed-6 th {
    padding: 6px !important;
}

.table-condensed-7 td,
.table-condensed-7 th {
    padding: 7px !important;
}

.table-condensed-8 td,
.table-condensed-8 th {
    padding: 8px !important;
}

.table-condensed-9 td,
.table-condensed-9 th {
    padding: 9px !important;
}

/*Table Verical*/
table.vertical thead {
    float: left;
}

table.vertical thead th {
    display: block;
}

table.vertical tbody {
    float: right;
}

table.vertical tbody tr {
    display: inline-block;
}

table.vertical tbody td {
    display: block;
}

/*Data Tables*/
.data-table {
    display: none;
    width: 100% !important;
}

.data-table input,
.dataTables_filter input {
    border-color: rgb(var(--gray-color)) !important;
    border-style: solid;
    border-width: 1px;
    font-size: 16px !important;
    outline: none !important;
}

.dt-buttons,
.dataTables_filter,
.dataTables_length,
.dataTables_info {
    font-size: 12px !important;
    margin: 3px;
}

div.dt-button-collection button.dt-button:active:not(.disabled),
div.dt-button-collection button.dt-button.active:not(.disabled),
div.dt-button-collection div.dt-button:active:not(.disabled),
div.dt-button-collection div.dt-button.active:not(.disabled),
div.dt-button-collection a.dt-button:active:not(.disabled),
div.dt-button-collection a.dt-button.active:not(.disabled) {
    background-color: #a7a7a7;
    /* background-image: -webkit-linear-gradient(top, #f0f0f0 0%, #dadada 100%); */
    background-image: -moz-linear-gradient(top, #f0f0f0 0%, #a7a7a7 100%);
    background-image: -ms-linear-gradient(top, #f0f0f0 0%, #a7a7a7 100%);
    background-image: -o-linear-gradient(top, #f0f0f0 0%, #a7a7a7 100%);
    background-image: linear-gradient(to bottom, #f0f0f0 0%, #a7a7a7 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#f0f0f0', EndColorStr='#a7a7a7');
}

table.dataTable thead th,
table.dataTable thead td,
table.dataTable.no-footer {
    border-bottom: 1px solid lightgray;
}

.remove-sorting,
.dt-no-sort {
    background: none !important;
}

.dataTable thead th:before,
.dataTable thead th:after {
    display: none !important;
}

.dataTables_paginate {
    float: right !important;
}

.dataTables_info {
    float: left !important;
}

.dataTables_filter {
    float: right !important;
    margin-bottom: 7px !important;
}

a.paginate_button {
    font-size: 12px;
    padding: 2px 8px !important;
}

a.paginate_button.last {
    display: none !important;
}

a.paginate_button.next {
    display: none !important;
}

a.paginate_button.previous {
    display: none !important;
}

a.paginate_button.first {
    display: none !important;
}

/* Inline error shown by loadDashboardController() when a dashboard fails to load */
.dashboard-load-error {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px dashed rgba(var(--red-color), .5);
    border-radius: var(--card-radius);
    background: rgba(var(--red-color), .05);
    color: rgba(var(--red-dark-color), 1);
    font-size: 13px;
}

.dashboard-load-error .button {
    margin-left: auto;
}

/* Tabs: keep a consistent small gap between the tab strip and the card below
   (matches the mb-1 the newer engine pages already pass on ul.nav-tabs) */
.tabs-framed .nav-tabs {
    margin-bottom: .25rem;
}

/*Panel*/
.panel-body {
    display: block;
    overflow: auto;
    min-width: fit-content !important;
    padding: 10px 20px 10px 20px;
    border-radius: var(--card-radius);
}

.panel-body-shadow {
    display: block;
    overflow: auto;
    padding: 20px;
    min-width: fit-content !important;
    margin-bottom: 24px;
    border-radius: var(--card-radius);
    border: 1px solid var(--shell-border);
}

/* Stacked panels: make several panels read as one block.

   1) Automatic — wrap them (or set "stack": true on a column in a report definition):
        <div class="panel-stack">
            <div class="panel-body">…</div>
            <div class="panel-body-shadow">…</div>
        </div>
      First child keeps its top corners, last child keeps its bottom corners,
      inner seams lose radius, border and spacing.

   2) Manual — per panel modifiers:
        .panel-join-bottom  this panel continues into the one below
        .panel-join-top     this panel continues from the one above
        .panel-join-both    middle of a stack
        .panel-square       no rounding at all                                   */
/* Any non-modal child counts as a member (dashboards may use plain classes such as
   "border-bottom border-gray"); sibling-based so modals rendered in between are ignored */
.panel-stack > :not(.modal):has(~ :not(.modal)) {
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.panel-stack > :not(.modal) ~ :not(.modal) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: 0;
}

.panel-join-bottom {
    margin-bottom: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.panel-join-top {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-top: 0 !important;
}

.panel-join-both {
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    border-top: 0 !important;
}

.panel-square {
    border-radius: 0 !important;
}

/*Modal*/
.modal-dialog,
.modal-content,
.panel-body,
.panel-body-shadow {
    height: fit-content !important;
}

.modal-header .btn-close {
    font-size: 12px !important;
}

.modal-body,
.modal .modal-header,
.modal-content,
.panel-body-shadow,
.panel-body {
    overflow: initial !important;
}

/*Head Titles */
.h1,
h1 {
    font-size: 32px;
    font-weight: 600;
}

.h2,
h2 {
    font-size: 26px;
    font-weight: 600;
}

.h3,
h3 {
    font-weight: 600;
}

.h4,
h4 {
    font-size: 18px;
    font-weight: 600;
}

.h5,
h5 {
    font-size: 14px;
    font-weight: 600;
}

.h6,
h6 {
    font-size: 12px;
    font-weight: 600;
}

/*Width Start */
.width-100p {
    width: 100%;
}

.width-10p {
    width: 10%;
}

.width-20p {
    width: 20%;
}

.width-25p {
    width: 25%;
}

.width-30p {
    width: 30%;
}

.width-40p {
    width: 40%;
}

.width-50p {
    width: 50%;
}

.width-60p {
    width: 60%;
}

.width-70p {
    width: 70%;
}

.width-75p {
    width: 75%;
}

.width-80p {
    width: 80%;
}

.width-90p {
    width: 90%;
}

.width-5 {
    width: 5px;
}

.width-10 {
    width: 10px;
}

.width-15 {
    width: 15px;
}

.width-20 {
    width: 20px;
}

.width-25 {
    width: 25px;
}

.width-30 {
    width: 30px;
}

.width-35 {
    width: 35px;
}

.width-40 {
    width: 40px;
}

.width-45 {
    width: 45px;
}

.width-50 {
    width: 50px;
}

.width-55 {
    width: 55px;
}

.width-60 {
    width: 60px;
}

.width-65 {
    width: 65px;
}

.width-70 {
    width: 70px;
}

.width-75 {
    width: 75px;
}

.width-80 {
    width: 80px;
}

.width-85 {
    width: 85px;
}

.width-90 {
    width: 90px;
}

.width-95 {
    width: 95px;
}

.width-100 {
    width: 100px;
}

.width-125 {
    width: 125px;
}

.width-150 {
    width: 150px;
}

.width-175 {
    width: 175px;
}

.width-200 {
    width: 200px;
}

.width-225 {
    width: 225px;
}

.width-250 {
    width: 250px;
}

.width-275 {
    width: 275px;
}

.width-300 {
    width: 300px;
}

.width-350 {
    width: 350px;
}

.width-400 {
    width: 400px;
}

.width-450 {
    width: 450px;
}

.width-500 {
    width: 500px;
}

.width-550 {
    width: 550px;
}

.width-600 {
    width: 600px;
}

.width-650 {
    width: 650px;
}

.width-700 {
    width: 700px;
}

.width-750 {
    width: 750px;
}

.width-800 {
    width: 800px;
}

.width-850 {
    width: 850px;
}

.width-900 {
    width: 900px;
}

/*Font Size*/
.font-size-7,
.font-size-7 td {
    font-size: 7px !important
}

.font-size-8,
.font-size-8 td {
    font-size: 8px !important
}

.font-size-9,
.font-size-9 td {
    font-size: 9px !important
}

.font-size-10,
.font-size-10 td {
    font-size: 10px !important
}

.font-size-11,
.font-size-11 td {
    font-size: 11px !important
}

.font-size-12,
.font-size-12 td {
    font-size: 12px !important
}

.font-size-13,
.font-size-13 td {
    font-size: 13px !important
}

.font-size-14,
.font-size-14 td {
    font-size: 14px !important
}

.font-size-15,
.font-size-15 td {
    font-size: 15px !important
}

.font-size-16,
.font-size-16 td {
    font-size: 16px !important
}

.font-size-17,
.font-size-17 td {
    font-size: 17px !important
}

.font-size-18,
.font-size-18 td {
    font-size: 18px !important
}

.font-size-19,
.font-size-19 td {
    font-size: 19px !important
}

.font-size-20,
.font-size-20 td {
    font-size: 20px !important
}

.font-size-21,
.font-size-21 td {
    font-size: 21px !important
}

.font-size-22,
.font-size-22 td {
    font-size: 22px !important
}

.font-size-23,
.font-size-23 td {
    font-size: 23px !important
}

.font-size-24,
.font-size-24 td {
    font-size: 24px !important
}

.font-size-25,
.font-size-25 td {
    font-size: 25px !important
}

.font-size-26,
.font-size-26 td {
    font-size: 26px !important
}

.font-size-27,
.font-size-27 td {
    font-size: 27px !important
}

.font-size-28,
.font-size-28 td {
    font-size: 28px !important
}

.font-size-29,
.font-size-29 td {
    font-size: 29px !important
}

.font-size-30,
.font-size-30 td {
    font-size: 30px !important
}

.font-size-31,
.font-size-31 td {
    font-size: 31px !important
}

.font-size-32,
.font-size-32 td {
    font-size: 32px !important
}

.font-size-33,
.font-size-33 td {
    font-size: 33px !important
}

.font-size-34,
.font-size-34 td {
    font-size: 34px !important
}

.font-size-35,
.font-size-35 td {
    font-size: 35px !important
}

/*Print*/
@media print {

    body,
    .panel-body,
    .panel-body-shadow,
    .body-container {
        background-color: white;
        margin: 0px !important;
        padding: 0px !important;
    }

    .no-print,
    .no-print * {
        display: none !important;
    }

    .printable {
        visibility: visible;
    }
}

/*Loading*/
.loading {
    position: relative;
    cursor: default;
    text-shadow: none !important;
    color: transparent !important;
    opacity: 1;
    pointer-events: auto;
    -webkit-transition: all 0s linear, opacity .1s ease;
    transition: all 0s linear, opacity .1s ease
}

.loading:before {
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;
    margin: -.64285714em 0 0 -.64285714em;
    width: 1.28571429em;
    height: 1.28571429em;
    border-radius: 500rem;
    border: .2em solid rgba(0, 0, 0, .15)
}

.loading:after {
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;
    margin: -.64285714em 0 0 -.64285714em;
    width: 1.28571429em;
    height: 1.28571429em;
    -webkit-animation: button-spin .6s linear;
    animation: button-spin .6s linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    border-radius: 500rem;
    border-color: #fff transparent transparent;
    border-style: solid;
    border-width: .2em;
    -webkit-box-shadow: 0 0 0 1px transparent;
    box-shadow: 0 0 0 1px transparent
}

@-webkit-keyframes button-spin {
    from {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes button-spin {
    from {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

.bootbox-close-button {
    display: none;
    /* Hide the close button */
}

.img-icon {
    width: 42px;
    height: 42px;
    margin-right: 7px;
    margin-left: 7px;
    border-radius: 50%;
    background-position: center;
    background-size: contain;
}

.notifyjs-corner {
  z-index: 20000 !important;
}
.notifyjs-wrapper {
  z-index: 20000 !important;
}

.body-max-width {
    max-width: 2000px;
}