:root {
  /* Bootstrap Overwrite */
  --bs-secondary: #6c757d;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-secondary-color: #8c8c8c;
  --bs-success: #8dd334;
  --bs-success-rgb: 141, 211, 52;
  --bs-light: #f0f0f0;
  --bs-light-rgb: 240, 240, 240;
  --bs-dark: #222;
  --bs-dark-rgb: 34, 34, 34;
  --bs-white: #fff;
  --bs-white-rgb: 255, 255, 255;
  --bs-emphasis-color: #0087e7;
  --bs-emphasis-color-rgb: 0, 135, 231;

  /* Border */
  --bs-border-color: #dadfe2;
  --bs-border-radius: var(--rz-border-radius);

  /* Body */
  --bs-body-bg: #f6f7fa;
  --bs-body-bg-rgb: 246, 247, 250;
  --bs-secondary-bg: #e9ecef;
  --bs-body-color: #222;

  --bs-hover-primary: #0b5ed7;
  --bs-hover-border-primary: #0a53be;

  --bs-form-control-focus: rgba(13, 110, 253, 0.25);

  /* Padding & Margin */
  --base-margin-padding: 1rem;
  --input-margin-padding: 0.5rem;

  /* Transition */
  --transition: 0.3s;

  /* Common Colors */
  --inverse-bg: #121212;
  --inverse-text: #e0e0e0;

  --border-radius-sidebar: 8px;
}

[data-bs-theme=dark] {
  --bs-body-bg: #28363c;
  --bs-body-bg-rgb: 40, 54, 60;
  --bs-secondary-bg: #1f1f1f;
  --bs-body-color: #e0e0e0;

  --bs-secondary-color: #9c9c9c;

  --header: #0066dd;

  --inverse-bg: #f0f0f0;
  --inverse-text: #222;
}

/* Active state */
.active {
  font-weight: 600;
}

/* Filled Icon */
.rz-icon-filled {
  font-variation-settings: 'FILL' 1 !important;
}

/* Accordion */
.rz-accordion {
  box-sizing: border-box;
  border-radius: var(--rz-accordion-border-radius);
  box-shadow: var(--rz-accordion-shadow);
  overflow: hidden;
  border: 1px solid var(--rz-base);
}

.rz-accordion-header {
  padding: 0.75rem 1.25rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  border-bottom: 1px solid var(--rz-base) !important;
}

.rz-expander.rz-state-expanded {
  border-bottom: 1px solid var(--rz-base) !important;
}

.rz-accordion > div:nth-last-child(2):has(+ .rz-state-collapsed), .rz-accordion > div:nth-last-child(2):has(+ .rz-state-collapsed) > div {
  border-bottom: none !important;
}

.rz-accordion-header:has(a[aria-label="Collapse"]) {
  background-color: var(--rz-primary) !important;
}

.rz-accordion-header:has(a[aria-label="Collapse"]) > * > * {
  color: var(--rz-text-contrast-color);
}

/* Modal width */
.modal-xs {
  width: 40vw !important;
}

.modal-sm {
  width: 50vw !important;
}

.modal-md {
  width: 60vw !important;
}

.modal-lg {
  width: 70vw !important;
}

.modal-xl {
  width: 80vw !important;
}

/* Toast */
.rz-notification {
  transform: translateY(-3.5rem) !important;
}

/* Tabs */
ul[role=tablist] {
  flex-wrap: wrap;
}

/* 404 Page */
.notfound-404 {
  min-height: calc(100vh - calc(var(--content-top-padding) * 3));
}

.notfound-header-text {
  font-size: clamp(4rem, 10vw, 11rem);
  text-shadow: 0.5px 0.5px 0.5px var(--rz-secondary);
  margin: 0;
  color: var(--rz-primary);
  font-weight: 700;
}

.notfound-logo {
  width: clamp(4rem, 10vw, 11rem);
}

.notfound-btn {
  padding-top: clamp(0.5rem, 1vw, 0.75rem); 
  padding-bottom: clamp(0.5rem, 1vw, 0.75rem);
  font-size: clamp(5px, 4vw, 15px);
}

/* Sidebar border style */
.sidebar {
  background-color: var(--rz-layout-background-color);
  max-width: 300px;
  padding: 0.25rem 1rem 3rem 0;
  position: fixed;
  z-index: 999;
  border-radius: 0 calc(var(--border-radius-sidebar) * 3)
    calc(var(--border-radius-sidebar) * 3) 0;
}

.sidebar-wrap {
  box-sizing: content-box;
  height: fit-content;
  max-height: 80vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sidebar-wrap::-webkit-scrollbar {
  display: none;
  width: 0;
}

[class^="sidebar"]::before,
[class^="sidebar"]::after,
.inside-sidebar-wrap::before {
  content: "";
  position: absolute;
  box-sizing: border-box;
  pointer-events: none;
  border: var(--highlight-border);
}

.sidebar::before {
  width: 225px;
  height: calc(100% - 4rem);
  top: 2rem;
  right: 0;
  border-left: none;
  border-top: none;
  border-bottom: none;
}

.sidebar::after {
  width: 100%;
  height: 2.5rem;
  bottom: 0;
  left: 0;
  margin-right: var(--base-margin-padding);
  border-top: none;
  border-radius: calc(var(--border-radius-sidebar) * 3) 0
    calc(var(--border-radius-sidebar) * 3) calc(var(--border-radius-sidebar) * 3);
}

.sidebar-wrap::before {
  top: 1.5rem;
  left: 2rem;
  width: 2rem;
  height: calc(100% - 4rem + 1px);
  border-top: none;
  border-left: none;
  border-bottom-right-radius: calc(var(--border-radius-sidebar) * 2);
}

.sidebar-wrap::after {
  bottom: 0;
  left: 0;
  width: 2rem;
  height: 2.5rem;
  margin-right: var(--base-margin-padding);
  border-radius: calc(var(--border-radius-sidebar) * 3) 0 0
    calc(var(--border-radius-sidebar) * 3);
  border-left: none;
  border-right: none;
  border-bottom: none;
}

.inside-sidebar-wrap::before {
  width: calc(100% - 3.9rem - 0.8px);
  top: 0;
  left: calc(3.9rem + 0.8px);
  height: 2rem;
  border-bottom: none;
  border-radius: calc(var(--border-radius-sidebar) * 3)
    calc(var(--border-radius-sidebar) * 3) 0 0;
}

/* Button */
.btn:active,
.btn:focus,
.btn:active:focus {
  box-shadow: none;
}

.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-hover-primary);
  --bs-btn-hover-border-color: var(--bs-hover-primary);
  --bs-btn-active-bg: var(--bs-hover-primary);
  --bs-btn-active-border-color: var(--bs-hover-border-primary);
  --bs-btn-disabled-bg: var(--bs-emphasis-color);
  --bs-btn-disabled-border-color: var(--bs-emphasis-color);
}

.btn-success {
  --bs-btn-bg: var(--bs-success);
  --bs-btn-border-color: var(--bs-success);
  --bs-btn-disabled-bg: var(--bs-success);
  --bs-btn-disabled-border-color: var(--bs-success);
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-outline-success {
  --bs-btn-color: var(--bs-success);
  --bs-btn-border-color: var(--bs-success);
  --bs-btn-hover-bg: var(--bs-success);
  --bs-btn-hover-border-color: var(--bs-success);
  --bs-btn-active-bg: var(--bs-success);
  --bs-btn-active-border-color: var(--bs-success);
  --bs-btn-disabled-color: var(--bs-success);
  --bs-btn-disabled-border-color: var(--bs-success);
}

/* Active */
.active {
  font-weight: 600;
}

/* Tabs */
.tabs {
  display: flex;
  margin-bottom: var(--base-margin-padding);
  gap: 2px;
}

.tabs button {
  flex: 1;
  background: var(--bs-secondary-color);
  border: 1px solid var(--bs-border-color);
  color: var(--text);
  padding: 12px 20px;
  cursor: pointer;
  border-top-left-radius: var(--bs-border-radius);
  border-top-right-radius: var(--bs-border-radius);
  transition: var(--transition);
}

.tabs button.active {
  background-color: var(--bs-primary);
  color: white;
}

/* Filters */
.filters {
  display: flex;
  gap: 10px;
  margin-bottom: var(--base-margin-padding);
  flex-wrap: wrap;
  border: 1px solid var(--bs-border-color);
  padding: var(--base-margin-padding);
  border-radius: var(--input-margin-padding);
  background-color: var(--bs-secondary-color);
  justify-content: space-between;
}

.filters select,
.filters input {
  background: var(--bg-secondary-color);
  border: 1px solid var(--bs-border-color);
  color: var(--text);
  padding: var(--input-margin-padding);
  border-radius: var(--bs-border-radius);
  min-width: 150px;
  transition: var(--transition);
  max-height: 3em;
}

/* Create/Upload Buttons */
.action-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: var(--base-margin-padding);
}

.flex-end {
  justify-content: flex-end;
}

.action-buttons button,
button.action-button {
  background: var(--bs-primary);
  border: none;
  color: white;
  padding: var(--input-margin-padding) var(--base-margin-padding);
  border-radius: var(--bs-border-radius);
  font-weight: bold;
  cursor: pointer;
  transition: var(--transition);
}

.action-buttons button:hover,
button.action-button:hover {
  background: #005fa3;
}

/* Table */
table {
  width: 100%;
  border-collapse: collapse;
}

.table {
  --bs-table-color: var(--bs-body-color);
  --bs-table-bg: var(--bs-body-bg);
}
.table thead th {
  background-color: var(--bs-primary) !important;
  color: white;
}
.table tbody td {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

/* Accordion */
.accordion {
  border-color: var(--bs-body-color);
}

.accordion-item {
  background-color: var(--bs-secondary-body);
  color: var(--bs-body-color);
}

.accordion-button {
  background-color: var(--bs-secondary-body);
  color: var(--bs-body-color);
}

body.dark .accordion-button {
  background-color: color-mix(in srgb, var(--bs-secondary), black 70%);
  color: var(--bs-body-color);
}

.accordion-button:not(.collapsed) {
  background-color: var(--bs-primary) !important;
  color: var(--inverse-text);
}

/* Form */
.form-control::placeholder {
  color: var(--bs-secondary-color);
}

/* Modal */
.modal.show .modal-dialog.modal-dialog-centered,
.modal:not(.show) {
  animation: none !important;
}

/* Select - dropdown */
.dropdown-menu {
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

/* Pagination */
.pagination {
  justify-content: flex-end;
  --bs-pagination-color: var(--bs-primary);
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: var(--bs-primary);
  --bs-pagination-active-border-color: var(--bs-primary);
}

.form-control:focus, .form-check-input:focus {
  border-color: var(--bs-border-color);
  box-shadow: 0 0 0 0.25rem var(--bs-form-control-focus);
}

.form-check-input:checked {
  background-color: var(--bs-hover-primary);
  border-color: var(--bs-hover-primary);
}

.form-check-input:checked[type=radio] {
  --bs-form-check-bg-image: none;
}