/* Blue and cyan identity shared by the application screens and action states. */
:root {
    --brand-900: #071f49;
    --brand-800: #0b3676;
    --brand-700: #1255a6;
    --brand-600: #1d6ccb;
    --brand-500: #298be5;
    --brand-400: #7fc2f2;
    --brand-100: #dceeff;
    --brand-50: #f2f8ff;
    --header-grad-start: #0b3676;
    --header-grad-mid: #1d6ccb;
    --header-grad-end: #69b6ef;
    --header-btn-navy: #071f49;
    --table-head-bg: #edf5ff;
    --table-head-border: #d7e7f8;
    --bg-app: #f2f7fc;
    --ink-900: #0b2545;
    --ink-700: #405875;
    --bs-primary: #1d6ccb;
    --bs-primary-rgb: 29, 108, 203;
    --bs-link-color: #1d6ccb;
    --bs-link-hover-color: #1255a6;
    --bs-focus-ring-color: rgba(41, 139, 229, .25);
    --petrol-900: #071f49;
    --petrol-800: #0b3676;
    --petrol-700: #1255a6;
    --petrol-600: #1d6ccb;
    --petrol-500: #298be5;
    --petrol-300: #7fc2f2;
    --petrol-100: #dceeff;
    --petrol-50: #f2f8ff;
    --accent-green: #1d6ccb;
    --accent-green-600: #1255a6;
    --accent-green-400: #29a6e7;
    --accent-green-100: #dceeff;
    --bs-success: #1d6ccb;
    --bs-success-rgb: 29, 108, 203;
}

body.app-shell {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(circle at 17% 12%, rgba(220, 238, 255, .82) 0%, transparent 34%),
        linear-gradient(120deg, #f1f7fd 0%, #fbfcfe 53%, #f2f6fb 100%);
}

body.app-shell::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: url("../login-background-waves.svg") center / 100% 100% no-repeat;
}

.app-content {
    background: transparent !important;
}

.app-sidebar {
    background:
        url("../login-background-waves.svg") center / 100% 100% no-repeat,
        linear-gradient(180deg, #fbfdff 0%, #f5f9fe 58%, #eaf4fc 100%);
    border-right: 1px solid #d7e6f4;
}

.app-nav-link {
    color: #193d68;
}

.app-nav-link i.app-nav-icon {
    color: #3674aa;
}

.app-nav-link:hover {
    background: rgba(44, 139, 216, .08);
    color: #104c89;
}

.app-nav-link.is-active,
.app-nav-main-group.is-active {
    background: #d5ebff;
    box-shadow: none;
    color: #1455a4;
}

.app-nav-link.is-active::before {
    background: #2589d6;
}

.app-nav-link.is-active i.app-nav-icon {
    color: #1455a4;
}

.app-nav-section,
.app-nav-group-toggle {
    color: #6d88a8;
}

.app-nav-main-group {
    border-color: #d2e2f1;
    background: rgba(255, 255, 255, .68);
    color: #193d68;
}

.app-nav-main-group.is-active {
    border-color: #bdd9f1;
    background: rgba(226, 241, 254, .82);
    color: #164e84;
}

.app-nav-main-group .app-nav-group-count {
    background: #e7f1fb;
    color: #557799;
}

.app-nav-main-group:hover,
.app-nav-main-group[aria-expanded="true"],
.app-nav-reference-toggle:hover,
.app-nav-reference-toggle[aria-expanded="true"] {
    border-color: #a9cdea;
    background-color: rgba(219, 238, 254, .8);
    color: #164e84;
}

.app-nav-group-label > i.app-nav-icon,
.app-nav-reference-label > i {
    color: #2475b6;
}

.app-nav-step-list::before,
.app-nav-step-list .app-nav-link::after {
    background: rgba(62, 154, 220, .62);
}

.app-nav-step-list .app-nav-link::before,
.app-nav-step-list .app-nav-link.is-active::before {
    border-color: #59b5ef;
    background: #f5faff;
}

.app-nav-step-list .app-nav-link.is-active {
    background: rgba(210, 235, 255, .74);
    box-shadow: inset 2px 0 #2c8bd8;
}

.app-nav-step-list .app-nav-link.is-active::before {
    background: #2c8bd8;
}

.app-nav-reference-toggle:hover,
.app-nav-reference-toggle[aria-expanded="true"] {
    background: rgba(219, 238, 254, .92);
}

.app-nav-reference-toggle {
    border-color: #c8ddef;
    background: rgba(226, 241, 254, .78);
    color: #174c7d;
}

.app-nav-section small {
    color: #7f97b2;
}

.app-topbar-user-avatar {
    background: linear-gradient(135deg, #1255a6, #25a3df);
}

.app-filter-bidang:focus-within {
    box-shadow: 0 0 0 3px rgba(41, 139, 229, .18);
}

.app-filter-bidang.is-aktif {
    background: var(--brand-100);
    border-color: var(--brand-500);
    color: var(--brand-700);
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand-600);
    --bs-btn-border-color: var(--brand-600);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-700);
    --bs-btn-hover-border-color: var(--brand-700);
    --bs-btn-active-bg: var(--brand-800);
    --bs-btn-active-border-color: var(--brand-800);
    --bs-btn-disabled-bg: var(--brand-400);
    --bs-btn-disabled-border-color: var(--brand-400);
    box-shadow: 0 2px 8px rgba(29, 108, 203, .24);
}

.btn-primary:hover {
    box-shadow: 0 6px 16px rgba(29, 108, 203, .28);
}

.card-header .btn-primary,
.list-actions .btn-primary {
    --bs-btn-color: var(--brand-700);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-600);
    --bs-btn-hover-border-color: var(--brand-600);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-700);
    --bs-btn-active-border-color: var(--brand-700);
    box-shadow: 0 6px 16px rgba(7, 31, 73, .24);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand-400);
    box-shadow: 0 0 0 .2rem rgba(41, 139, 229, .16);
}

.list-card {
    --list-grad-1: #0b3676;
    --list-grad-2: #1d6ccb;
    --list-grad-3: #69b6ef;
    --list-navy: #071f49;
    --list-head-bg: #edf5ff;
    background:
        radial-gradient(circle at 0% 0%, rgba(41, 139, 229, .14), transparent 45%),
        radial-gradient(circle at 100% 100%, rgba(105, 182, 239, .17), transparent 50%),
        linear-gradient(160deg, #f0f6ff 0%, #f8fbff 50%, #edf5ff 100%);
    box-shadow: 0 18px 40px rgba(11, 54, 118, .10) !important;
}

.list-card > .card-header.list-header {
    box-shadow: 0 10px 24px rgba(11, 54, 118, .22);
}

.list-card .table > tbody > tr:hover > * {
    background-color: rgba(41, 139, 229, .06);
}

.list-card .table > tbody > tr:hover {
    box-shadow: inset 3px 0 0 var(--brand-500);
}

.list-toolbar .search-bar .input-group:focus-within {
    box-shadow: 0 0 0 3px rgba(41, 139, 229, .15);
}

.list-card .table td .btn-info {
    --bs-btn-bg: #e4f2ff;
    --bs-btn-border-color: #e4f2ff;
    --bs-btn-hover-bg: #cfe6fb;
    --bs-btn-hover-border-color: #cfe6fb;
    color: var(--brand-700) !important;
}

.avatar-initial {
    background: linear-gradient(135deg, #1255a6, #69b6ef);
}

.list-card .pagination .page-item.active .page-link {
    background: var(--brand-600);
    border-color: var(--brand-600);
    box-shadow: 0 4px 12px rgba(29, 108, 203, .3);
}

.btn-success,
.btn-primary {
    background-image: linear-gradient(135deg, #1d6ccb, #29a6e7);
    box-shadow: 0 5px 14px rgba(29, 108, 203, .25);
}

.btn-success:hover,
.btn-primary:hover {
    background-image: linear-gradient(135deg, #1255a6, #1d6ccb);
}

.list-actions .btn-success,
.card-header .btn-success {
    box-shadow: 0 6px 16px rgba(29, 108, 203, .28);
}

.bg-success {
    background-image: linear-gradient(135deg, #1d6ccb, #29a6e7) !important;
}

.text-success {
    color: #1255a6 !important;
}

.alert-success {
    color: #1255a6;
    background: #e7f3ff;
    border-color: #c5e1fa;
}

.list-card .table td .badge.bg-success,
.badge.bg-success {
    color: #1255a6 !important;
    background: #e1f0ff !important;
    border-color: #c6e1fb !important;
}

.status-pill.is-selesai {
    color: #1255a6;
    background: #e1f0ff;
    border-color: #c6e1fb;
}

.list-tab-count.is-green {
    background: linear-gradient(135deg, #1d6ccb, #29a6e7);
}