html.client-servis {
    --brand: #003063;
    --brand-strong: #011C39;
    --brand-soft: #002A57;
    --brand-tint: rgba(0, 48, 99, 0.1);
    --brand-ring: rgba(0, 48, 99, 0.2);
    --brand-border: #9BB4CC;

    --bs-primary: #003063;
    --bs-primary-rgb: 0, 48, 99;
    --bs-link-color: #003063;
    --bs-link-hover-color: #011C39;
    --kt-primary: #003063;
    --kt-text-primary: #003063;

    --menu-primary: #1A5A96;
    --menu-primary-strong: #003063;
    --menu-primary-soft: rgba(0, 48, 99, 0.1);
    --menu-shadow-active: 0 16px 28px rgba(0, 48, 99, 0.2);
    --menu-logout-bg: linear-gradient(180deg, #002A57 0%, #003063 100%);

    --gp-accent: #003063;
    --gp-accent-soft: #1A5A96;
    --gp-accent-tint: #E8EEF4;
    --gp-accent-border: #9BB4CC;
    --gp-accent-ring: rgba(0, 48, 99, 0.12);

    --gr-nav-active: #E8EEF4;
    --gr-nav-active-text: #003063;
    --gr-nav-accent: #003063;
}

html.client-servis[data-menu-theme="light"] {
    --gr-nav-active: #E8EEF4;
    --gr-nav-active-text: #003063;
    --gr-nav-accent: #003063;
}

html.client-servis[data-theme="dark"],
html.client-servis[data-menu-theme="dark"] {
    --brand: #1A5A96;
    --brand-strong: #011C39;
    --brand-soft: #4A8FBF;
    --brand-tint: rgba(26, 90, 150, 0.16);
    --brand-ring: rgba(26, 90, 150, 0.24);
    --brand-border: rgba(26, 90, 150, 0.4);

    --gr-blue: #1A5A96;
    --gr-blue-strong: #011C39;
    --gr-blue-soft: rgba(26, 90, 150, 0.16);
    --gr-blue-ring: rgba(26, 90, 150, 0.24);
    --gr-active: rgba(26, 90, 150, 0.16);
    --gr-selected: #011123;
    --gr-selected-hover: #011C39;
    --gr-nav-active: rgba(26, 90, 150, 0.18);
    --gr-nav-active-text: #C5D4E4;
    --gr-nav-accent: #1A5A96;

    --bs-primary: #1A5A96;
    --bs-primary-rgb: 26, 90, 150;
    --bs-link-color: #1A5A96;
    --bs-link-hover-color: #4A8FBF;
    --kt-primary: #1A5A96;
    --kt-text-primary: #1A5A96;

    --menu-primary: #1A5A96;
    --menu-primary-strong: #011C39;
    --menu-primary-soft: rgba(26, 90, 150, 0.16);
    --menu-shadow-active: 0 10px 20px rgba(26, 90, 150, 0.2);
    --menu-logout-bg: linear-gradient(180deg, #1A5A96 0%, #003063 100%);

    --gp-accent: #1A5A96;
    --gp-accent-soft: #4A8FBF;
    --gp-accent-tint: rgba(26, 90, 150, 0.16);
    --gp-accent-border: rgba(26, 90, 150, 0.4);
    --gp-accent-ring: rgba(26, 90, 150, 0.22);
}

html.client-servis .btn-primary,
html.client-servis .btn-primary.btn,
html.client-servis a.btn-primary,
html.client-servis button.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-strong);
    --bs-btn-hover-border-color: var(--brand-strong);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-strong);
    --bs-btn-active-border-color: var(--brand-strong);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
}

html.client-servis .btn-primary:hover,
html.client-servis .btn-primary:focus,
html.client-servis .btn-primary:focus-visible,
html.client-servis .btn-primary:active,
html.client-servis .btn-primary.active,
html.client-servis .btn-primary.show,
html.client-servis .btn-primary[data-kt-menu-trigger].show,
html.client-servis .show > .btn-primary,
html.client-servis .btn-check:checked + .btn-primary,
html.client-servis .btn-check:active + .btn-primary,
html.client-servis .btn-primary:active:focus,
html.client-servis .btn.btn-primary:hover:not(.btn-active),
html.client-servis .btn.btn-primary:focus:not(.btn-active),
html.client-servis .btn.btn-primary:focus-visible:not(.btn-active),
html.client-servis .btn.btn-primary:active:not(.btn-active),
html.client-servis .btn.btn-primary.active,
html.client-servis .btn.btn-primary.show,
html.client-servis .show > .btn.btn-primary,
html.client-servis .btn-check:checked + .btn.btn-primary,
html.client-servis .btn-check:active + .btn.btn-primary,
html.client-servis .btn.btn-primary:active:focus,
html.client-servis[data-theme="light"] .btn-primary:hover,
html.client-servis[data-theme="light"] .btn-primary:focus,
html.client-servis[data-theme="light"] .btn-primary:active,
html.client-servis[data-theme="light"] .btn.btn-primary:hover:not(.btn-active),
html.client-servis[data-theme="light"] .btn.btn-primary:focus:not(.btn-active),
html.client-servis[data-theme="light"] .btn.btn-primary:active:not(.btn-active),
html.client-servis[data-theme="dark"] .btn-primary:hover,
html.client-servis[data-theme="dark"] .btn-primary:focus,
html.client-servis[data-theme="dark"] .btn-primary:active,
html.client-servis[data-theme="dark"] .btn.btn-primary:hover:not(.btn-active),
html.client-servis[data-theme="dark"] .btn.btn-primary:focus:not(.btn-active),
html.client-servis[data-theme="dark"] .btn.btn-primary:active:not(.btn-active) {
    background-color: var(--brand-strong) !important;
    border-color: var(--brand-strong) !important;
    color: #fff !important;
    box-shadow: none !important;
}

html.client-servis .btn-custom.btn-logout,
html.client-servis #kt_aside_footer .btn-custom.btn-logout,
html.client-servis #kt_aside_footer .menu-logout-link {
    background: var(--menu-logout-bg) !important;
}

html.client-servis .btn-custom.btn-logout:hover,
html.client-servis #kt_aside_footer .btn-custom.btn-logout:hover {
    filter: brightness(0.94);
}

html.client-servis .btn-outline-primary {
    color: var(--brand) !important;
    border-color: var(--brand) !important;
}

html.client-servis .btn-outline-primary:hover,
html.client-servis .btn-outline-primary:focus,
html.client-servis .btn-outline-primary:active,
html.client-servis .btn-outline-primary.active,
html.client-servis .btn.btn-outline-primary:hover:not(.btn-active),
html.client-servis .btn.btn-outline-primary:focus:not(.btn-active),
html.client-servis .btn.btn-outline-primary:active:not(.btn-active),
html.client-servis .btn-light-primary,
html.client-servis .btn-light-primary:hover,
html.client-servis .btn-light-primary:focus,
html.client-servis .btn-light-primary:active,
html.client-servis .btn.btn-light-primary:hover:not(.btn-active),
html.client-servis .btn.btn-light-primary:focus:not(.btn-active),
html.client-servis .btn.btn-light-primary:active:not(.btn-active),
html.client-servis .btn-active-light-primary:hover,
html.client-servis .btn-active-light-primary:focus,
html.client-servis .btn-active-light-primary:active {
    color: var(--brand-strong) !important;
    background-color: var(--brand-tint) !important;
    border-color: var(--brand-border) !important;
}

html.client-servis .btn-check:checked + .btn.btn-active-color-primary,
html.client-servis .btn-check:active + .btn.btn-active-color-primary,
html.client-servis .btn.btn-active-color-primary:hover:not(.btn-active),
html.client-servis .btn.btn-active-color-primary:focus:not(.btn-active),
html.client-servis .btn.btn-active-color-primary:focus-visible:not(.btn-active),
html.client-servis .btn.btn-active-color-primary:active:not(.btn-active),
html.client-servis .btn.btn-active-color-primary.show,
html.client-servis .btn.btn-active-color-primary.active,
html.client-servis .show > .btn.btn-active-color-primary,
html.client-servis table.dataTable .btn.btn-icon:hover,
html.client-servis table.dataTable .btn.btn-icon:focus,
html.client-servis table.dataTable .btn.btn-icon:focus-visible,
html.client-servis .grid-op-page .btn.btn-icon:hover,
html.client-servis .grid-op-page .btn.btn-icon:focus,
html.client-servis .grid-cad-page .btn.btn-icon:hover,
html.client-servis .grid-cad-page .btn.btn-icon:focus,
html.client-servis .btn.btn-color-primary,
html.client-servis .btn.btn-icon-primary,
html.client-servis .btn.btn-active-icon-primary:hover:not(.btn-active),
html.client-servis .btn.btn-active-icon-primary:focus:not(.btn-active),
html.client-servis .text-hover-primary:hover,
html.client-servis .text-active-primary.active,
html.client-servis[data-theme="dark"] .btn.btn-icon.btn-bg-light.btn-active-color-primary:hover,
html.client-servis[data-theme="dark"] .btn.btn-icon.btn-bg-light.btn-active-color-primary:focus {
    color: var(--brand) !important;
}

html.client-servis .btn-check:checked + .btn.btn-active-color-primary i,
html.client-servis .btn-check:active + .btn.btn-active-color-primary i,
html.client-servis .btn.btn-active-color-primary:hover:not(.btn-active) i,
html.client-servis .btn.btn-active-color-primary:focus:not(.btn-active) i,
html.client-servis .btn.btn-active-color-primary:focus-visible:not(.btn-active) i,
html.client-servis .btn.btn-active-color-primary:active:not(.btn-active) i,
html.client-servis .btn.btn-active-color-primary.show i,
html.client-servis .btn.btn-active-color-primary.active i,
html.client-servis .show > .btn.btn-active-color-primary i,
html.client-servis .btn.btn-active-color-primary:hover:not(.btn-active) .svg-icon,
html.client-servis .btn.btn-active-color-primary:focus:not(.btn-active) .svg-icon,
html.client-servis .btn.btn-active-color-primary:focus-visible:not(.btn-active) .svg-icon,
html.client-servis table.dataTable .btn.btn-icon:hover i,
html.client-servis table.dataTable .btn.btn-icon:focus i,
html.client-servis table.dataTable .btn.btn-icon:hover .svg-icon,
html.client-servis table.dataTable .btn.btn-icon:focus .svg-icon,
html.client-servis .svg-icon.svg-icon-primary {
    color: var(--brand) !important;
}

html.client-servis .btn-check:checked + .btn.btn-active-color-primary .svg-icon svg [fill]:not(.permanent):not(g),
html.client-servis .btn-check:active + .btn.btn-active-color-primary .svg-icon svg [fill]:not(.permanent):not(g),
html.client-servis .btn.btn-active-color-primary:hover:not(.btn-active) .svg-icon svg [fill]:not(.permanent):not(g),
html.client-servis .btn.btn-active-color-primary:focus:not(.btn-active) .svg-icon svg [fill]:not(.permanent):not(g),
html.client-servis .btn.btn-active-color-primary:focus-visible:not(.btn-active) .svg-icon svg [fill]:not(.permanent):not(g),
html.client-servis .btn.btn-active-color-primary:active:not(.btn-active) .svg-icon svg [fill]:not(.permanent):not(g),
html.client-servis .btn.btn-active-color-primary.active .svg-icon svg [fill]:not(.permanent):not(g),
html.client-servis .btn.btn-active-color-primary.show .svg-icon svg [fill]:not(.permanent):not(g),
html.client-servis .show > .btn.btn-active-color-primary .svg-icon svg [fill]:not(.permanent):not(g),
html.client-servis table.dataTable .btn.btn-icon:hover .svg-icon svg [fill]:not(.permanent):not(g),
html.client-servis table.dataTable .btn.btn-icon:focus .svg-icon svg [fill]:not(.permanent):not(g),
html.client-servis table.dataTable .btn.btn-icon:focus-visible .svg-icon svg [fill]:not(.permanent):not(g),
html.client-servis .grid-op-page .btn.btn-icon:hover .svg-icon svg [fill]:not(.permanent):not(g),
html.client-servis .grid-cad-page .btn.btn-icon:hover .svg-icon svg [fill]:not(.permanent):not(g),
html.client-servis .btn.btn-color-primary .svg-icon svg [fill]:not(.permanent):not(g),
html.client-servis .btn.btn-icon-primary .svg-icon svg [fill]:not(.permanent):not(g),
html.client-servis .btn.btn-active-icon-primary:hover:not(.btn-active) .svg-icon svg [fill]:not(.permanent):not(g),
html.client-servis .svg-icon.svg-icon-primary svg [fill]:not(.permanent):not(g),
html.client-servis .text-hover-primary:hover .svg-icon svg [fill]:not(.permanent):not(g),
html.client-servis .text-active-primary.active .svg-icon svg [fill]:not(.permanent):not(g),
html.client-servis[data-theme="dark"] .btn.btn-icon.btn-bg-light.btn-active-color-primary:hover .svg-icon svg [fill]:not(.permanent):not(g),
html.client-servis[data-theme="dark"] .btn.btn-icon.btn-bg-light.btn-active-color-primary:focus .svg-icon svg [fill]:not(.permanent):not(g) {
    fill: var(--brand) !important;
}

html.client-servis .btn.btn-active-color-primary:hover:not(.btn-active) .svg-icon svg [stroke]:not([stroke="none"]),
html.client-servis .btn.btn-active-color-primary:focus:not(.btn-active) .svg-icon svg [stroke]:not([stroke="none"]),
html.client-servis table.dataTable .btn.btn-icon:hover .svg-icon svg [stroke]:not([stroke="none"]),
html.client-servis table.dataTable .btn.btn-icon:focus .svg-icon svg [stroke]:not([stroke="none"]) {
    stroke: var(--brand) !important;
}

html.client-servis .form-check-input:checked,
html.client-servis .form-check-input[type="checkbox"]:checked,
html.client-servis .form-check-input[type="radio"]:checked {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
}

html.client-servis .form-switch .form-check-input:checked {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
}

html.client-servis .form-control:focus,
html.client-servis .form-select:focus,
html.client-servis .form-control-solid:focus,
html.client-servis .select2-container--bootstrap5.select2-container--focus .select2-selection {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px var(--brand-ring) !important;
}

html.client-servis .select2-results__option--highlighted,
html.client-servis .select2-results__option--selected,
html.client-servis .select2-results__option[aria-selected="true"],
html.client-servis .select2-container--default .select2-results__option--selected,
html.client-servis .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
html.client-servis .select2-container--bootstrap5 .select2-results__option--highlighted,
html.client-servis .select2-container--bootstrap5 .select2-results__option--selected,
html.client-servis .select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--selected,
html.client-servis .select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--highlighted {
    background-color: var(--brand) !important;
    color: #fff !important;
}

html.client-servis .pagination .page-item.active .page-link,
html.client-servis .page-item.active .page-link,
html.client-servis .dataTables_paginate .paginate_button.current,
html.client-servis .dataTables_paginate .page-item.active .page-link {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
}

html.client-servis .nav-tabs .nav-link.active,
html.client-servis .nav-line-tabs .nav-link.active,
html.client-servis .psec-tabs .nav-tabs .nav-link.active {
    color: var(--brand) !important;
    border-bottom-color: var(--brand) !important;
}

html.client-servis .text-primary,
html.client-servis .svg-icon-primary,
html.client-servis a.text-primary {
    color: var(--brand) !important;
}

html.client-servis .bg-primary {
    --bg-color: 0, 48, 99;
    background-color: var(--brand) !important;
}

html.client-servis .badge-primary,
html.client-servis .badge-light-primary {
    background-color: var(--brand-tint) !important;
    color: var(--brand-strong) !important;
}

html.client-servis .link-primary,
html.client-servis a:not(.btn):not(.menu-link):not(.nav-link).text-hover-primary:hover {
    color: var(--brand) !important;
}

html.client-servis .grid-op-page,
html.client-servis .dash-site-page,
html.client-servis .gp-top-progress,
html.client-servis .gp-progress-modal {
    --gp-accent: var(--brand);
    --gp-accent-soft: var(--brand-soft);
    --gp-accent-tint: var(--brand-tint);
    --gp-accent-border: var(--brand-border);
    --gp-accent-ring: var(--brand-ring);
}

html.client-servis .gp-top-progress__bar {
    background: linear-gradient(90deg, var(--brand) 0%, var(--brand-soft) 100%) !important;
    box-shadow: 0 0 10px var(--brand-ring) !important;
}

html.client-servis .grid-op-page .gp-switch.is-on {
    background: var(--brand-tint) !important;
    border-color: var(--brand-border) !important;
    box-shadow: 0 0 0 3px var(--brand-ring) !important;
}

html.client-servis .grid-op-page .gp-switch.is-on .gp-switch__track {
    background: var(--brand) !important;
}

html.client-servis .grid-op-page .gp-switch.is-on .gp-switch__label {
    color: var(--brand) !important;
}

html.client-servis .grid-op-page .gp-load-status::before {
    border-color: var(--brand-border);
    border-top-color: var(--brand);
}

html.client-servis[data-theme="dark"] .btn-primary:hover,
html.client-servis[data-theme="dark"] .btn-primary:focus,
html.client-servis[data-theme="dark"] .btn-primary:active,
html.client-servis[data-theme="dark"] .btn.btn-primary:hover:not(.btn-active),
html.client-servis[data-theme="dark"] .btn.btn-primary:focus:not(.btn-active),
html.client-servis[data-theme="dark"] .btn.btn-primary:active:not(.btn-active) {
    background-color: #011C39 !important;
    border-color: #011C39 !important;
}

html.client-servis[data-theme="dark"] .btn-outline-primary {
    border-color: rgba(26, 90, 150, 0.45) !important;
}

html.client-servis[data-theme="dark"] .btn-check:checked + .btn,
html.client-servis[data-theme="dark"] .btn.active {
    border-color: rgba(26, 90, 150, 0.35) !important;
}

html.client-servis #kt_aside_menu .menu-link.active .menu-icon,
html.client-servis #kt_aside_menu .menu-item.here > .menu-link .menu-icon,
html.client-servis #kt_aside_menu .menu-item.show > .menu-link .menu-icon,
html.client-servis #kt_aside_menu .menu-link.active .menu-title,
html.client-servis #kt_aside_menu .menu-item.here > .menu-link .menu-title {
    color: var(--gr-nav-active-text) !important;
}

html.client-servis #kt_aside_menu .menu-link.active .menu-icon svg path,
html.client-servis #kt_aside_menu .menu-item.here > .menu-link .menu-icon svg path,
html.client-servis #kt_aside_menu .menu-item.show > .menu-link .menu-icon svg path,
html.client-servis #kt_aside_menu .menu-link.active .menu-icon svg rect,
html.client-servis #kt_aside_menu .menu-item.here > .menu-link .menu-icon svg rect,
html.client-servis #kt_aside_menu .menu-item.show > .menu-link .menu-icon svg rect,
html.client-servis #kt_aside_menu .menu-link.active .menu-icon i,
html.client-servis #kt_aside_menu .menu-item.here > .menu-link .menu-icon i,
html.client-servis #kt_aside_menu .menu-item.show > .menu-link .menu-icon i {
    fill: currentColor !important;
    color: var(--gr-nav-accent) !important;
}

html.client-servis .gp-grid-modal {
    --gp-accent: var(--brand);
    --gp-accent-soft: var(--brand-soft);
    --gp-accent-tint: var(--brand-tint);
    --gp-accent-border: var(--brand-border);
    --gp-accent-ring: var(--brand-ring);
}