:root {
    --color-topbar: #00283f;
    --color-topbar-hover: #033652;
    --color-topbar-active: #001b2b;
    --color-sidebar: #055e8b;
    --color-sidebar-hover: #0a74a8;
    --color-sidebar-active: #044764;
    --color-link: #055e8b;
    --color-link-hover: #055e8b;
    --color-page-bg: #ecedf0;
    --color-surface: #ffffff;
    --color-surface-soft: #f7fafc;
    --color-text: #2e353e;
    --color-text-muted: #5f6b76;
    --color-text-soft: #4c4e52;
    --color-border: #d5e3ec;
    --color-border-soft: #e8eef3;
    --color-header-separator: rgba(255,255,255,0.18);
    --color-header-hover: rgba(255,255,255,0.10);
    --color-header-open: rgba(255,255,255,0.14);
    --nano-bg: #055e8b;
    --nano-shadow: #044764;
    --menu-text: #ffffff;
    --menu-icon: #ffffff;
    --menu-bg: transparent;
    --menu-hover-bg: #0a74a8;
    --menu-hover-text: #ffffff;
    --menu-hover-icon: #ffffff;
    --menu-expanded-bg: #0a6a9a;
    --menu-expanded-text: #ffffff;
    --menu-expanded-icon: #ffffff;
    --menu-expanded-accent: #ffffff;
    --menu-active-bg: #f3f9fc;
    --menu-active-text: #055e8b;
    --menu-active-icon: #055e8b;
    --menu-active-accent: #055e8b;
    --submenu-bg: #0a5478;
    --submenu-shadow: rgba(0,0,0,0.16);
    --submenu-item-bg: transparent;
    --submenu-item-hover-bg: #11658f;
    --submenu-text: #ffffff;
    --submenu-icon: #ffffff;
    --submenu-hover-text: #ffffff;
    --submenu-hover-icon: #ffffff;
    --submenu-active-bg: #f3f9fc;
    --submenu-active-text: #055e8b;
    --submenu-active-icon: #055e8b;
    --submenu-active-accent: #055e8b;
    --sidebar-header-bg: #055e8b;
    --sidebar-header-text: #ffffff;
    --sidebar-toggle-bg: #055e8b;
    --sidebar-toggle-icon: #ffffff;
    --userbox-trigger-bg: transparent;
    --userbox-trigger-hover-bg: rgba(255,255,255,0.10);
    --userbox-trigger-open-bg: rgba(255,255,255,0.14);
    --notification-badge-bg: #ff5a5f;
    --dropdown-bg: #ffffff;
    --dropdown-border: #d5e3ec;
    --dropdown-item-hover-bg: #f7f9fb;
    --color-white: #ffffff;
    --shadow-dropdown: 0 10px 24px rgba(15, 23, 32, 0.14);
}

a,
a:hover,
a:focus,
a:active,
a:visited {
    color: var(--color-link);
}

html,
html body {
    background: var(--color-page-bg);
}

    html.gkan .header,
    html.header-gkan .header {
        background: var(--color-topbar);
        border-bottom: 1px solid var(--color-topbar-active);
        border-top-color: var(--color-topbar);
        box-shadow: none !important;
    }

@media only screen and (max-width: 767px) {
    html.gkan .header .logo-container,
    html.header-gkan .header .logo-container,
    html.gkan .header .header-right,
    html.header-gkan .header .header-right {
        background: var(--color-topbar);
        border-bottom-color: var(--color-topbar-active);
        border-top-color: var(--color-topbar);
    }
}

html.gkan .header .separator,
html.header-gkan .header .separator {
    background-image: none;
    background-color: var(--color-header-separator);
}

html.gkan .page-header,
html.header-gkan .page-header {
    box-shadow: none !important;
    border-left-color: var(--color-topbar);
}

html.gkan .header .input-search input,
html.header-gkan .header .input-search input,
html.gkan .header .input-search input:focus,
html.header-gkan .header .input-search input:focus {
    background: var(--color-topbar-hover);
    border-color: var(--color-topbar-active);
    color: var(--color-white);
    box-shadow: none;
}

html.gkan .header .input-search .input-group-btn .btn-default,
html.header-gkan .header .input-search .input-group-btn .btn-default {
    background: transparent;
    color: var(--color-white);
}

.header-right {
    background: transparent;
}

#userbox.userbox > a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 6px 10px 6px 8px;
    border-radius: 12px;
    transition: background-color .18s ease, box-shadow .18s ease;
}

    #userbox.userbox > a:hover,
    #userbox.userbox.open > a,
    #userbox.userbox.show > a {
        background: var(--userbox-trigger-hover-bg);
    }

html.gkan .userbox:after,
html.header-gkan .userbox:after {
    background: transparent;
}

html.gkan .userbox .name,
html.header-gkan .userbox .name,
html.gkan .userbox .custom-caret,
html.header-gkan .userbox .custom-caret {
    color: var(--color-white);
}

html.gkan .userbox .role,
html.header-gkan .userbox .role {
    color: rgba(255,255,255,0.78);
}

html.gkan .userbox .dropdown-menu,
html.header-gkan .userbox .dropdown-menu {
    background: var(--dropdown-bg);
    border: 1px solid var(--dropdown-border);
    border-radius: 12px;
    box-shadow: var(--shadow-dropdown);
    overflow: hidden;
    margin-top: 10px;
}

    html.gkan .userbox .dropdown-menu .divider,
    html.header-gkan .userbox .dropdown-menu .divider {
        background: var(--color-border-soft);
    }

    html.gkan .userbox .dropdown-menu a,
    html.header-gkan .userbox .dropdown-menu a,
    html.gkan .userbox.open .dropdown-menu a,
    html.header-gkan .userbox.open .dropdown-menu a {
        color: var(--color-text);
    }

        html.gkan .userbox .dropdown-menu a:hover,
        html.header-gkan .userbox .dropdown-menu a:hover,
        .userbox.show .dropdown-menu a:hover {
            color: var(--color-text);
            background: var(--dropdown-item-hover-bg);
        }

.notifications > li > a.notification-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    color: var(--color-white);
    transition: background-color .18s ease, box-shadow .18s ease;
}

    .notifications > li > a.notification-icon:hover,
    .notifications > li.open > a.notification-icon,
    .notifications > li.show > a.notification-icon {
        background: var(--color-header-hover);
    }

.notifications .notification-bell {
    color: var(--color-white);
}

.notifications .bell-value-alert {
    background: var(--notification-badge-bg);
    border: 2px solid var(--color-topbar);
}

.notifications .notification-menu {
    background: var(--dropdown-bg);
    border: 1px solid var(--dropdown-border);
    border-radius: 12px;
    box-shadow: var(--shadow-dropdown);
    overflow: hidden;
    margin-top: 10px;
}

    .notifications .notification-menu:before,
    .notifications .notification-icon:before {
        border-bottom-color: var(--dropdown-bg);
    }

    .notifications .notification-menu .notification-title {
        background: var(--color-topbar);
        color: var(--color-white);
    }

        .notifications .notification-menu .notification-title .badge-default {
            background-color: var(--color-topbar-hover);
            color: var(--color-white);
        }

html.sidebar-gkan:not(.dark) .sidebar-left .sidebar-header .sidebar-title {
    background: var(--sidebar-header-bg);
    color: var(--sidebar-header-text);
}

html.sidebar-gkan:not(.dark) .sidebar-left .sidebar-header .sidebar-toggle {
    background: var(--sidebar-toggle-bg);
}

    html.sidebar-gkan:not(.dark) .sidebar-left .sidebar-header .sidebar-toggle i,
    html.sidebar-gkan:not(.dark) .sidebar-left .sidebar-header .sidebar-toggle:hover i {
        color: var(--sidebar-toggle-icon);
    }

html.sidebar-gkan:not(.dark) .sidebar-left .nano,
html.sidebar-gkan:not(.dark).sidebar-left-collapsed .sidebar-left .nano {
    background: var(--nano-bg);
    box-shadow: -5px 0 0 var(--nano-shadow) inset;
}

html.sidebar-gkan:not(.dark) ul.nav-main {
    margin-top: 3px;
}

    html.sidebar-gkan:not(.dark) ul.nav-main li a {
        color: var(--menu-text);
    }

        html.sidebar-gkan:not(.dark) ul.nav-main li a > i,
        html.sidebar-gkan:not(.dark) ul.nav-main li a .icon-arrow,
        html.sidebar-gkan:not(.dark) ul.nav-main li a .fa,
        html.sidebar-gkan:not(.dark) ul.nav-main li a .fal,
        html.sidebar-gkan:not(.dark) ul.nav-main li a .far,
        html.sidebar-gkan:not(.dark) ul.nav-main li a .fas,
        html.sidebar-gkan:not(.dark) ul.nav-main li a .fab {
            color: var(--menu-icon);
        }

    html.sidebar-gkan:not(.dark) ul.nav-main > li > a {
        background: var(--menu-bg);
        border-radius: 10px;
        margin: 2px 8px;
        transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
    }

        html.sidebar-gkan:not(.dark) ul.nav-main > li > a:hover,
        html.sidebar-gkan:not(.dark) ul.nav-main > li > a:focus {
            background-color: var(--menu-hover-bg);
            color: var(--menu-hover-text);
        }

            html.sidebar-gkan:not(.dark) ul.nav-main > li > a:hover > i,
            html.sidebar-gkan:not(.dark) ul.nav-main > li > a:hover .icon-arrow,
            html.sidebar-gkan:not(.dark) ul.nav-main > li > a:focus > i,
            html.sidebar-gkan:not(.dark) ul.nav-main > li > a:focus .icon-arrow {
                color: var(--menu-hover-icon);
            }

    html.sidebar-gkan:not(.dark) ul.nav-main > li.nav-expanded > a {
        background: var(--menu-expanded-bg);
        color: var(--menu-expanded-text);
    }

        html.sidebar-gkan:not(.dark) ul.nav-main > li.nav-expanded > a > i,
        html.sidebar-gkan:not(.dark) ul.nav-main > li.nav-expanded > a .icon-arrow,
        html.sidebar-gkan:not(.dark) ul.nav-main > li.nav-expanded > a .fa,
        html.sidebar-gkan:not(.dark) ul.nav-main > li.nav-expanded > a .fal,
        html.sidebar-gkan:not(.dark) ul.nav-main > li.nav-expanded > a .far,
        html.sidebar-gkan:not(.dark) ul.nav-main > li.nav-expanded > a .fas,
        html.sidebar-gkan:not(.dark) ul.nav-main > li.nav-expanded > a .fab {
            color: var(--menu-expanded-icon);
        }

ul.nav-main li.nav-active {
    background-color: transparent;
}

ul.nav-main > li.nav-active > a,
html.sidebar-light:not(.dark) ul.nav-main > li.nav-active > a {
    background: var(--menu-active-bg);
    color: var(--menu-active-text);
    box-shadow: 2px 0 0 var(--menu-active-accent) inset;
}

    ul.nav-main > li.nav-active > a > i,
    ul.nav-main > li.nav-active > a .icon-arrow,
    ul.nav-main > li.nav-active > a .fa,
    ul.nav-main > li.nav-active > a .fal,
    ul.nav-main > li.nav-active > a .far,
    ul.nav-main > li.nav-active > a .fas,
    ul.nav-main > li.nav-active > a .fab {
        color: var(--menu-active-icon);
    }

html.sidebar-gkan:not(.dark) ul.nav-main li .nav-children {
    background: var(--submenu-bg);
    box-shadow: 0 -3px 3px -3px var(--submenu-shadow) inset;
    border-radius: 0 0 10px 10px;
    margin: 0 8px 6px 8px;
    padding: 6px 0;
}

    html.sidebar-gkan:not(.dark) ul.nav-main li .nav-children li a {
        background: var(--submenu-item-bg);
        color: var(--submenu-text);
        border-radius: 8px;
        margin: 2px 8px;
        transition: background-color .18s ease, color .18s ease;
    }

        html.sidebar-gkan:not(.dark) ul.nav-main li .nav-children li a > i,
        html.sidebar-gkan:not(.dark) ul.nav-main li .nav-children li a .icon-arrow,
        html.sidebar-gkan:not(.dark) ul.nav-main li .nav-children li a .fa,
        html.sidebar-gkan:not(.dark) ul.nav-main li .nav-children li a .fal,
        html.sidebar-gkan:not(.dark) ul.nav-main li .nav-children li a .far,
        html.sidebar-gkan:not(.dark) ul.nav-main li .nav-children li a .fas,
        html.sidebar-gkan:not(.dark) ul.nav-main li .nav-children li a .fab {
            color: var(--submenu-icon);
        }

        html.sidebar-gkan:not(.dark) ul.nav-main li .nav-children li a:hover,
        html.sidebar-gkan:not(.dark) ul.nav-main li .nav-children li a:focus {
            background: var(--submenu-item-hover-bg);
            color: var(--submenu-hover-text);
        }

            html.sidebar-gkan:not(.dark) ul.nav-main li .nav-children li a:hover > i,
            html.sidebar-gkan:not(.dark) ul.nav-main li .nav-children li a:hover .icon-arrow,
            html.sidebar-gkan:not(.dark) ul.nav-main li .nav-children li a:focus > i,
            html.sidebar-gkan:not(.dark) ul.nav-main li .nav-children li a:focus .icon-arrow {
                color: var(--submenu-hover-icon);
            }

ul.nav-main li .nav-children li.nav-active > a {
    background: var(--submenu-active-bg);
    color: var(--submenu-active-text);
    box-shadow: 2px 0 0 var(--submenu-active-accent) inset;
}

    ul.nav-main li .nav-children li.nav-active > a > i,
    ul.nav-main li .nav-children li.nav-active > a .icon-arrow,
    ul.nav-main li .nav-children li.nav-active > a .fa,
    ul.nav-main li .nav-children li.nav-active > a .fal,
    ul.nav-main li .nav-children li.nav-active > a .far,
    ul.nav-main li .nav-children li.nav-active > a .fas,
    ul.nav-main li .nav-children li.nav-active > a .fab {
        color: var(--submenu-active-icon);
    }

.page-header h2 {
    border-bottom-color: var(--color-link);
}

.page-header .sidebar-right-toggle:hover {
    color: var(--color-link);
}

.nav-pills-primary > li.active > a,
.nav-pills-primary > li.active > a:hover,
.nav-pills-primary > li.active > a:active,
.nav-pills-primary > li.active > a:focus,
.nav-pills > .active a,
.nav-pills > .active a:hover,
.nav-pills > .active a:focus,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus,
.pagination > .active > a,
.pagination > .active > span,
.pagination .page-item.active .page-link,
.badge-primary,
.progress-bar,
.progress .progress-bar-primary,
.switch.switch-primary .ios-switch .on-background,
.fc .fc-toolbar .fc-button.fc-state-active,
.fc-event,
.fc-event.fc-event-primary,
.dataTables_processing,
.wizard-steps > li.active .badge,
.wizard-tabs ul > li.active .badge,
html .wizard-progress .steps-progress .progress-indicator,
html .wizard-progress .wizard-steps li.completed a span,
.table > thead > tr > td.primary,
.table > tbody > tr > td.primary,
.table > tfoot > tr > td.primary,
.table > thead > tr > th.primary,
.table > tbody > tr > th.primary,
.table > tfoot > tr > th.primary,
.table > thead > tr.primary > td,
.table > tbody > tr.primary > td,
.table > tfoot > tr.primary > td,
.table > thead > tr.primary > th,
.table > tbody > tr.primary > th,
.table > tfoot > tr.primary > th {
    background-color: var(--color-link) !important;
    border-color: var(--color-link) !important;
    color: var(--color-white) !important;
}

html .btn-primary,
.header .toggle-sidebar-left {
    background-color: var(--color-link);
    border-color: var(--color-link);
    color: var(--color-white);
}

    html .btn-primary:hover,
    html .btn-primary:focus,
    html .btn-primary.focus,
    html .show > .btn-primary.dropdown-toggle {
        background-color: var(--color-sidebar-hover);
        border-color: var(--color-sidebar-hover);
        color: var(--color-white);
    }

.form-control:focus {
    border-color: var(--color-link);
    box-shadow: 0 0 0 0.2rem rgba(5, 94, 139, 0.18);
}

html.no-overflowscrolling .nano > .nano-pane > .nano-slider {
    background: var(--color-link);
}




ul.nav-main > li.nav-active > a,
html.sidebar-light:not(.dark) ul.nav-main > li.nav-active > a {
    background: var(--menu-active-bg) !important;
    color: var(--menu-active-text) !important;
    box-shadow: 2px 0 0 var(--menu-active-accent) inset;
}

    ul.nav-main > li.nav-active > a > i,
    ul.nav-main > li.nav-active > a .icon-arrow,
    ul.nav-main > li.nav-active > a .fa,
    ul.nav-main > li.nav-active > a .fal,
    ul.nav-main > li.nav-active > a .far,
    ul.nav-main > li.nav-active > a .fas,
    ul.nav-main > li.nav-active > a .fab,
    ul.nav-main > li.nav-active > a .title {
        color: var(--menu-active-icon) !important;
    }

ul.nav-main li .nav-children li.nav-active > a {
    background: var(--submenu-active-bg) !important;
    color: var(--submenu-active-text) !important;
    box-shadow: 2px 0 0 var(--submenu-active-accent) inset;
}

    ul.nav-main li .nav-children li.nav-active > a > i,
    ul.nav-main li .nav-children li.nav-active > a .icon-arrow,
    ul.nav-main li .nav-children li.nav-active > a .fa,
    ul.nav-main li .nav-children li.nav-active > a .fal,
    ul.nav-main li .nav-children li.nav-active > a .far,
    ul.nav-main li .nav-children li.nav-active > a .fas,
    ul.nav-main li .nav-children li.nav-active > a .fab,
    ul.nav-main li .nav-children li.nav-active > a .title {
        color: var(--submenu-active-icon) !important;
    }


#userbox.userbox.open > a .profile-info .name,
#userbox.userbox.open > a .profile-info .role,
#userbox.userbox.open > a .custom-caret {
    color: var(--topbar-primary) !important;
    text-shadow: none;
}

#userbox.userbox.open > a .profile-info .name,
#userbox.userbox.open > a .profile-info .role,
#userbox.userbox.open > a .custom-caret {
    color: var(--topbar-primary) !important;
    text-shadow: none;
}



#sidebar-left .sidebar-header .sidebar-title .longCompanyName,
#sidebar-left .sidebar-header .sidebar-title .longCompanyName .ellip.ellip-line {
    color: var(--color-white) !important;
}

#sidebar-left .sidebar-header .sidebar-title .longCompanyName {
    display: inline-flex;
    align-items: center;
    max-width: 180px;
    text-decoration: none;
}

    #sidebar-left .sidebar-header .sidebar-title .longCompanyName:hover,
    #sidebar-left .sidebar-header .sidebar-title .longCompanyName:focus,
    #sidebar-left .sidebar-header .sidebar-title .longCompanyName:hover .ellip.ellip-line,
    #sidebar-left .sidebar-header .sidebar-title .longCompanyName:focus .ellip.ellip-line {
        color: var(--color-white) !important;
    }

    #sidebar-left .sidebar-header .sidebar-title .longCompanyName .ellip.ellip-line {
        display: block;
        max-width: 100%;
        text-shadow: 0 1px 1px rgba(0,0,0,0.18);
    }