:root {
  --dropdown-link-color: #212529;
  --primary-color: #2666ae;
  --orange-color: #e95427;
  --ms-max-height: 19.2rem;
  --light-link-color: #212529;
  --dark-dropdown-bg-color: #212529;
  --dark-dropdown-link-color: #dee2e6;
  --dark-link-color: #dee2e6;
  --dark-border-color: #495057;
  --dark-secondary-bg: #343a40;
  --dark-secondary-color: rgba(173, 181, 189, 0.75);
}
@font-face {
  font-family: 'SKZG Font';
  src: url('../fonts/Montserrat.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'SKZG Font';
  src: url('../fonts/Montserrat.ttf') format('truetype');
  font-weight: normal;
  font-style: bold;
  font-weight: 700;
}
@font-face {
  font-family: 'Reader Font';
  src: url('../fonts/BubblegumSans.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Reader Font';
  src: url('../fonts/BubblegumSans.ttf') format('truetype');
  font-weight: normal;
  font-style: bold;
  font-weight: 700;
}
html,
body {
  font-family: 'SKZG Font', 'Open Sans';
  -webkit-font-smoothing: antialiased;
  height: 100%;
  font-size: 14px;
}
body:has(#app[data-bs-theme = 'light']) {
  background-color: #f6f9ff;
}
body:has(#app[data-bs-theme = 'dark']) {
  background-color: #32393f;
}
#app[data-bs-theme="light"] {
  /* DataTables */
}
#app[data-bs-theme="light"] .bg-block {
  background-color: white !important;
}
#app[data-bs-theme="light"] .nav-pills .nav-link.active,
#app[data-bs-theme="light"] .nav-pills .show > .nav-link {
  background-color: var(--primary-color);
}
#app[data-bs-theme="light"] .btn-skzg,
#app[data-bs-theme="light"] .btn-skzg:active,
#app[data-bs-theme="light"] .btn-skzg:hover,
#app[data-bs-theme="light"] .btn-skzg:focus,
#app[data-bs-theme="light"] .btn-primary,
#app[data-bs-theme="light"] .btn-primary:active,
#app[data-bs-theme="light"] .btn-primary:hover,
#app[data-bs-theme="light"] .btn-primary:focus {
  color: white !important;
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}
#app[data-bs-theme="light"] .btn-outline-skzg {
  color: var(--primary-color) !important;
  background-color: white !important;
  border-color: var(--primary-color) !important;
}
#app[data-bs-theme="light"] .btn-outline-skzg:active,
#app[data-bs-theme="light"] .btn-outline-skzg:hover,
#app[data-bs-theme="light"] .btn-outline-skzg:focus {
  color: white !important;
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}
#app[data-bs-theme="light"] .link-color-mode {
  color: var(--light-link-color);
}
#app[data-bs-theme="light"] .page-item.active .page-link {
  color: white !important;
}
#app[data-bs-theme="light"] .page-item.disabled .page-link {
  background-color: white !important;
}
#app[data-bs-theme="light"] .page-link {
  color: var(--primary-color);
}
#app[data-bs-theme="light"] .active > .page-link,
#app[data-bs-theme="light"] .page-link.active {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}
#app[data-bs-theme="light"] .text-skzg {
  color: var(--primary-color) !important;
}
#app[data-bs-theme="light"] .dropdown-item.active,
#app[data-bs-theme="light"] .dropdown-item:active {
  color: var(--dropdown-link-color);
  text-decoration: none;
  background-color: white;
}
#app[data-bs-theme="dark"] .bg-block,
#app[data-bs-theme="dark"] .form-select,
#app[data-bs-theme="dark"] input.form-control,
#app[data-bs-theme="dark"] textarea.form-control,
#app[data-bs-theme="dark"] .multiselect,
#app[data-bs-theme="dark"] .multiselect-search,
#app[data-bs-theme="dark"] .multiselect-dropdown,
#app[data-bs-theme="dark"] .multiselect-tags-search {
  background-color: #212529 !important;
}
#app[data-bs-theme="dark"] .link-color-mode,
#app[data-bs-theme="dark"] .text-color-mode,
#app[data-bs-theme="dark"] .form-label,
#app[data-bs-theme="dark"] .multiselect-option:not(:hover),
#app[data-bs-theme="dark"] .multiselect-single-label-text {
  color: var(--dark-link-color);
}
#app[data-bs-theme="dark"] .btn-skzg,
#app[data-bs-theme="dark"] .btn-skzg:active,
#app[data-bs-theme="dark"] .btn-skzg:hover,
#app[data-bs-theme="dark"] .btn-skzg:focus {
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #f8f9fa;
  --bs-btn-active-border-color: #f8f9fa;
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}
#app[data-bs-theme="dark"] .btn-outline-skzg {
  --bs-btn-color: #f8f9fa;
  --bs-btn-border-color: #f8f9fa;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #f8f9fa;
  --bs-btn-hover-border-color: #f8f9fa;
  --bs-btn-focus-shadow-rgb: 248,249,250;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #f8f9fa;
  --bs-btn-active-border-color: #f8f9fa;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #f8f9fa;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #f8f9fa;
  --bs-gradient: none;
}
#app[data-bs-theme="dark"] .btn-outline-skzg:active,
#app[data-bs-theme="dark"] .btn-outline-skzg:hover,
#app[data-bs-theme="dark"] .btn-outline-skzg:focus {
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #f8f9fa;
  --bs-btn-active-border-color: #f8f9fa;
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}
#app[data-bs-theme="dark"] .hr-color-mode {
  color: var(--dark-border-color);
  opacity: 1;
}
#app[data-bs-theme="dark"] .multiselect,
#app[data-bs-theme="dark"] .multiselect-dropdown {
  border-color: var(--dark-border-color);
}
#app[data-bs-theme="dark"] .page-item .page-link {
  color: white;
}
#app[data-bs-theme="dark"] .page-item.disabled .page-link {
  color: var(--dark-secondary-color);
}
#app[data-bs-theme="dark"] .text-skzg,
#app[data-bs-theme="dark"] .text-book {
  color: var(--dark-link-color) !important;
}
#app[data-bs-theme="dark"] .dropdown-item.active,
#app[data-bs-theme="dark"] .dropdown-item:active {
  color: var(--dark-dropdown-link-color);
  text-decoration: none;
  background-color: var(--dark-dropdown-bg-color);
}
#app,
.container-fluid {
  height: 100%;
}
main {
  display: flex;
  flex-wrap: nowrap;
}
.reader {
  position: relative;
  font-family: 'Reader Font', 'SKZG Font', 'Open Sans';
}
.reader::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url('../images/6783234.jpg');
  background-size: cover;
  background-position: 0 65%;
}
.reader .reader-content {
  position: relative;
}
.reader .reader-books {
  box-shadow: 0 0 0 8px rgba(85, 153, 253, 0.5), 0 0 0 14px rgba(158, 197, 254, 0.5);
}
.reader .reader-points-received {
  box-shadow: 0 0 0 8px rgba(94, 171, 135, 0.5), 0 0 0 14px rgba(163, 207, 186, 0.5);
}
.reader .reader-points-redeemed {
  box-shadow: 0 0 0 8px rgba(230, 113, 124, 0.5), 0 0 0 14px rgba(230, 113, 124, 0.5);
}
.reader .border-reader {
  border: 3px solid #094567;
}
.reader .reader-name {
  color: var(--orange-color);
  font-size: 4vw;
}
.reader .reader-name span {
  background-color: white;
}
.sidebar {
  height: 100%;
  width: 16rem;
}
.navbar {
  height: 5.05rem;
  margin-left: 16rem;
  transition: margin-left 0.5s;
}
.content {
  height: calc(100% - 5.05rem);
  margin-top: 5.05rem;
  margin-left: 16rem;
  transition: margin-left 0.5s;
}
.nav-link.active {
  color: #fff !important;
}
.mw-75 {
  max-width: 75%;
}
.border-primary {
  border-color: var(--primary-color) !important;
}
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
  background-color: var(--primary-color) !important;
}
div:where(.swal2-container) button:where(.swal2-styled) {
  box-shadow: none !important;
}
.btn-trash {
  top: -0.2rem !important;
  right: 0 !important;
}
.gray-300 {
  color: #dee2e6 !important;
}
.multiselect.is-active {
  box-shadow: none;
}
.multiselect-option.is-selected,
.multiselect-option.is-selected.is-pointed {
  background: var(--primary-color);
}
.multiselect-tag {
  background: var(--primary-color);
}
/* PrettyPrint */
.json-string {
  color: #e91e63;
}
.json-number {
  color: #00bcd4;
}
.json-boolean {
  color: #ff00ff;
}
.json-null {
  color: #9e9e9e;
}
.json-key {
  color: #3753a9;
}