:root {
  --app-theme-start: #557ee8;
  --app-theme-primary: #315ac7;
  --app-theme-end: #1d3d9f;
  --app-theme-soft: #edf2ff;
  --app-theme-border: #b9c9f8;
  --app-theme-text: #213a7a;
  --app-font-family: 'Nunito Sans', sans-serif;
  --app-font-size: 16px;
  --app-font-weight: 500;
  --app-font-style: normal;
  --app-letter-spacing: normal;
  --app-icon-color: var(--app-theme-primary);
  --app-icon-size: 1.1rem;
  --app-button-font-family: var(--app-font-family);
  --app-button-font-size: 14px;
  --app-button-font-weight: 600;
  --app-button-font-style: normal;
  --app-button-background: var(--app-theme-primary);
  --app-button-background-image: linear-gradient(135deg, var(--app-theme-start), var(--app-theme-primary) 52%, var(--app-theme-end));
  --app-button-border: var(--app-theme-primary);
  --app-button-text: #fff;
  --app-button-hover-background: var(--app-theme-end);
  --app-button-radius: .375rem;
  --app-table-font-family: var(--app-font-family);
  --app-table-font-size: 14px;
  --app-table-font-weight: 500;
  --app-table-cell-padding: .7rem;
  --app-table-header-background: var(--app-theme-soft);
  --app-table-header-image: none;
  --app-table-header-text: var(--app-theme-text);
  --app-table-stripe: var(--app-theme-soft);
  --app-table-hover: var(--app-theme-border);
  --app-table-horizontal-border: 1px solid var(--app-theme-border);
  --app-table-vertical-border: 0;
  --app-table-align: left;
  --app-table-radius: .5rem;
}

html { font-size: var(--app-font-size); }

body,
button,
input,
select,
textarea,
.form-control,
.form-select,
.btn,
.table {
  font-family: var(--app-font-family);
  font-size: var(--app-font-size);
  font-style: var(--app-font-style);
  letter-spacing: var(--app-letter-spacing);
}

body { font-weight: var(--app-font-weight); }

.nav-link-icon,
.konsulta-sidebar-link .nav-link-icon,
.stat-icon,
.konsulta-hci-stat-icon,
.konsulta-hci-section-icon,
.konsulta-hci-action-icon {
  color: var(--app-icon-color) !important;
}

.nav-link-icon svg,
.konsulta-sidebar-link .nav-link-icon svg,
.stat-icon svg,
.konsulta-hci-stat-icon svg,
.konsulta-hci-section-icon svg,
.konsulta-hci-action-icon svg,
[data-feather] {
  width: var(--app-icon-size);
  height: var(--app-icon-size);
}

.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger,
.btn-dark,
.btn-phoenix-primary {
  --phoenix-btn-bg: var(--app-theme-primary);
  --phoenix-btn-border-color: var(--app-theme-primary);
  --phoenix-btn-hover-bg: var(--app-theme-end);
  --phoenix-btn-hover-border-color: var(--app-theme-end);
  --phoenix-btn-active-bg: var(--app-theme-end);
  --phoenix-btn-active-border-color: var(--app-theme-end);
  background-image: linear-gradient(135deg, var(--app-theme-start), var(--app-theme-primary) 52%, var(--app-theme-end));
}

.btn-primary:hover,
.btn-success:hover,
.btn-info:hover,
.btn-warning:hover,
.btn-danger:hover,
.btn-dark:hover,
.btn-phoenix-primary:hover {
  background-image: linear-gradient(135deg, var(--app-theme-primary), var(--app-theme-end));
}

.bg-primary,
.bg-success,
.bg-info,
.bg-warning,
.bg-danger {
  background-color: var(--app-theme-primary) !important;
  background-image: linear-gradient(135deg, var(--app-theme-start), var(--app-theme-end)) !important;
}

.text-primary,
.text-success,
.text-info,
.text-warning,
.text-danger,
.navbar-vertical .nav-link.active,
.navbar-vertical .nav-link:hover,
.konsulta-sidebar-link:hover .nav-link-icon,
.konsulta-sidebar-link.active .nav-link-icon { color: var(--app-theme-primary) !important; }

.border-primary,
.border-success,
.border-info,
.border-warning,
.border-danger { border-color: var(--app-theme-border) !important; }

body {
  background-image: linear-gradient(145deg, color-mix(in srgb, var(--app-theme-soft) 72%, transparent), transparent 34%);
}

.navbar-top {
  border-bottom-color: var(--app-theme-border);
  background-image: linear-gradient(90deg, var(--app-theme-soft), #fff 48%, var(--app-theme-soft));
}

.navbar-vertical { background-image: linear-gradient(180deg, #fff, var(--app-theme-soft)); }

.konsulta-sidebar-link.active {
  background: linear-gradient(90deg, color-mix(in srgb, var(--app-theme-primary) 14%, transparent), transparent);
}

.konsulta-sidebar-link.active::before,
.progress-bar {
  background: linear-gradient(180deg, var(--app-theme-start), var(--app-theme-end));
}

.card-header,
.modal-header,
.offcanvas-header {
  background-image: linear-gradient(105deg, var(--app-theme-soft), rgba(255, 255, 255, .45));
  border-color: var(--app-theme-border);
}

.table thead th {
  background-color: var(--app-theme-soft);
  color: var(--app-theme-text);
  border-color: var(--app-theme-border);
}

.form-check-input:checked,
.page-link.active,
.active > .page-link {
  background-color: var(--app-theme-primary);
  border-color: var(--app-theme-primary);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--app-theme-start);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--app-theme-primary) 15%, transparent);
}

body .nav-link-icon,
body .konsulta-sidebar-link .nav-link-icon,
body .stat-icon,
body .konsulta-hci-stat-icon,
body .konsulta-hci-section-icon,
body .konsulta-hci-action-icon {
  color: var(--app-icon-color) !important;
}

body .nav-link-icon svg,
body .konsulta-sidebar-link .nav-link-icon svg,
body .stat-icon svg,
body .konsulta-hci-stat-icon svg,
body .konsulta-hci-section-icon svg,
body .konsulta-hci-action-icon svg,
body [data-feather] {
  width: var(--app-icon-size) !important;
  height: var(--app-icon-size) !important;
}

body .btn {
  font-family: var(--app-button-font-family) !important;
  font-size: var(--app-button-font-size) !important;
  font-weight: var(--app-button-font-weight) !important;
  font-style: var(--app-button-font-style) !important;
  color: var(--app-button-text) !important;
  background-color: var(--app-button-background) !important;
  background-image: var(--app-button-background-image) !important;
  border-color: var(--app-button-border) !important;
  border-radius: var(--app-button-radius) !important;
}

body .btn:hover,
body .btn:focus,
body .btn:active {
  color: #fff !important;
  background-color: var(--app-button-hover-background) !important;
  background-image: none !important;
  border-color: var(--app-button-hover-background) !important;
}

body .table-responsive,
body .table-container,
body .dataTables_wrapper {
  border-radius: var(--app-table-radius);
}

body table,
body .table {
  font-family: var(--app-table-font-family) !important;
  font-size: var(--app-table-font-size) !important;
  font-weight: var(--app-table-font-weight) !important;
  text-align: var(--app-table-align);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--app-table-radius);
  overflow: hidden;
}

body table > :not(caption) > * > *,
body .table > :not(caption) > * > * {
  padding: var(--app-table-cell-padding) !important;
  text-align: var(--app-table-align) !important;
  border-top: var(--app-table-horizontal-border) !important;
  border-right: var(--app-table-vertical-border) !important;
}

body table thead th,
body .table thead th {
  color: var(--app-table-header-text) !important;
  background-color: var(--app-table-header-background) !important;
  background-image: var(--app-table-header-image) !important;
  font-family: var(--app-table-font-family) !important;
  font-size: var(--app-table-font-size) !important;
}

body table tbody tr:nth-child(even) > *,
body .table tbody tr:nth-child(even) > * {
  background-color: var(--app-table-stripe) !important;
}

body table tbody tr:hover > *,
body .table tbody tr:hover > * {
  background-color: var(--app-table-hover) !important;
}