:root {
  --bimbel-purple: #531583;
  --bimbel-purple-dark: #3F0E68;
  --bimbel-yellow: #FDDD61;
  --bimbel-white: #FDF9FD;
}

/* Shared navigation and form controls. */
.bimbel-topbar { background: var(--bimbel-white); box-shadow: 0 .15rem 1.75rem rgba(63,14,104,.12); }
.bimbel-topbar .navbar-brand,
.bimbel-sidebar { background: linear-gradient(180deg,var(--bimbel-purple),var(--bimbel-purple-dark)); }
.bimbel-topbar .navbar-brand,
.bimbel-topbar .navbar-brand:hover { color: var(--bimbel-white); }
.brand-icon { background: rgba(253,249,253,.16); }
.topbar-user { background: var(--bimbel-white); border-color: rgba(83,21,131,.16); color: var(--bimbel-purple-dark); box-shadow: 0 .15rem 1rem rgba(63,14,104,.12); }
.user-avatar { background: var(--bimbel-yellow); color: var(--bimbel-purple-dark); }
.sidebar-menu > li > a { color: rgba(253,249,253,.82); }
.sidebar-menu > li > a:hover,
.sidebar-menu > li > a:focus,
.sidebar-menu > li.active > a { background: rgba(253,249,253,.12); border-left-color: var(--bimbel-yellow); color: var(--bimbel-white); }
.sidebar-heading { color: var(--bimbel-yellow); }
.sidebar-version { color: rgba(253,249,253,.72); }
.sidebar-menu .dropdown-menu { background: var(--bimbel-white); }
.sidebar-menu .dropdown-menu > li > a { color: var(--bimbel-purple-dark); }
.sidebar-menu .dropdown-menu > li.active > a,
.sidebar-menu .dropdown-menu > li > a:hover,
.sidebar-menu .dropdown-menu > li > a:focus { background: rgba(83,21,131,.09); color: var(--bimbel-purple); }
.bimbel-menu-toggle { color: var(--bimbel-purple); }
.btn-primary { background: var(--bimbel-purple); border-color: var(--bimbel-purple); color: var(--bimbel-white); }
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active { background: var(--bimbel-purple-dark); border-color: var(--bimbel-purple-dark); color: var(--bimbel-white); }
.form-control { background: var(--bimbel-white); border-color: rgba(83,21,131,.26); color: var(--bimbel-purple-dark); }
.form-control:focus { border-color: var(--bimbel-purple); box-shadow: 0 0 0 3px rgba(83,21,131,.16); }


/* Shared surfaces and controls use the API documentation palette. */
body { background:var(--bimbel-white); color:var(--bimbel-purple-dark); }
a { color:var(--bimbel-purple); }
a:hover, a:focus { color:var(--bimbel-purple-dark); }
.container h4, .modal-title { color:var(--bimbel-purple-dark); }
.panel, .table-responsive, .modal-content, .dashboard-card {
  border:1px solid rgba(83,21,131,.17); border-radius:9px;
  background:var(--bimbel-white); box-shadow:0 .15rem 1.2rem rgba(63,14,104,.10);
}
.panel-default > .panel-heading, .modal-header, .modal-footer {
  background:rgba(83,21,131,.04); border-color:rgba(83,21,131,.13); color:var(--bimbel-purple-dark);
}
.table { background:var(--bimbel-white); color:var(--bimbel-purple-dark); }
.table > thead > tr > th { background:rgba(83,21,131,.05); color:var(--bimbel-purple); }
.table > thead > tr > th, .table > tbody > tr > td, .table > tbody > tr > th,
.table-bordered, .table-bordered > thead > tr > td { border-color:rgba(83,21,131,.13); }
.table-striped > tbody > tr:nth-of-type(odd), .table-hover > tbody > tr:hover { background:rgba(83,21,131,.04); }
.btn { background-image:none; }
.btn-default { background:var(--bimbel-white); border-color:rgba(83,21,131,.26); color:var(--bimbel-purple-dark); }
.btn-default:hover, .btn-default:focus { background:rgba(83,21,131,.09); border-color:var(--bimbel-purple); color:var(--bimbel-purple-dark); }
.btn-info { background:var(--bimbel-purple-dark); border-color:var(--bimbel-purple-dark); color:var(--bimbel-white); }
.btn-info:hover, .btn-info:focus { background:var(--bimbel-purple); border-color:var(--bimbel-purple); }
.btn-warning { background:var(--bimbel-yellow); border-color:var(--bimbel-yellow); color:var(--bimbel-purple-dark); }
.btn-warning:hover, .btn-warning:focus { background:#f5d34e; border-color:#f5d34e; color:var(--bimbel-purple-dark); }
.btn-primary.disabled, .btn-primary[disabled] { background:var(--bimbel-purple); border-color:var(--bimbel-purple); }
.input-group-addon { background:rgba(83,21,131,.05); border-color:rgba(83,21,131,.26); color:var(--bimbel-purple-dark); }
.pagination > li > a, .pagination > li > span { background:var(--bimbel-white); border-color:rgba(83,21,131,.17); color:var(--bimbel-purple); }
.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus,
.pagination > .active > span { background:var(--bimbel-purple); border-color:var(--bimbel-purple); color:var(--bimbel-white); }
.pagination > li > a:hover, .pagination > li > a:focus { background:rgba(83,21,131,.09); color:var(--bimbel-purple-dark); }
.nav-tabs > li > a { color:var(--bimbel-purple); }
.nav-tabs > li.active > a { background:var(--bimbel-white); color:var(--bimbel-purple-dark); }
code, pre { background:rgba(83,21,131,.05); border-color:rgba(83,21,131,.17); color:var(--bimbel-purple-dark); }
:focus-visible { outline:2px solid var(--bimbel-purple); outline-offset:2px; }
@media (max-width:767px) {
  .bimbel-topbar .navbar-brand, .bimbel-topbar .navbar-brand:hover { background:none; color:var(--bimbel-purple-dark); }
  .brand-icon { background:var(--bimbel-yellow); }
}
@media print {
  body { background:#fff; color:#000; padding-top:0; }
  .bimbel-topbar, .bimbel-sidebar { display:none; }
  body > .container { margin-left:0; width:100%; }
  .panel, .table-responsive, .dashboard-card { box-shadow:none; }
}

body.bimbel-login { background:linear-gradient(135deg,var(--bimbel-purple),var(--bimbel-purple-dark)); }
.login-heading { color:var(--bimbel-white); }
.login-heading > span { background:var(--bimbel-yellow); color:var(--bimbel-purple-dark); }
.stat-success, .stat-info { border-left-color:var(--bimbel-purple); }
.stat-success small, .stat-success > i, .stat-info small, .stat-info > i { color:var(--bimbel-purple); }
.stat-warning { border-left-color:var(--bimbel-yellow); }
.stat-warning small, .stat-warning > i { color:var(--bimbel-purple-dark); }
/* Bootstrap 3 uses .in for open modals; SB Admin 2 styles expect .show. */
.modal.fade.in {
  opacity: 1;
}
.modal.in .modal-dialog {
  transform: translate(0, 0);
}
.modal-backdrop.fade.in {
  opacity: .5;
}