/* roboto-slab-regular - vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('/fonts/roboto-slab/roboto-slab-v13-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/roboto-slab/roboto-slab-v13-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-slab-600 - vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 600;
  src: local(''),
       url('/fonts/roboto-slab/roboto-slab-v13-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/roboto-slab/roboto-slab-v13-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}


:root {
  --theme-body-bg-color: #F5F5F2;
  --theme-footer-bg-color: #f8f9fa;
  --theme-navbar-bg-color: #FAFAF8;
  --theme-bookmark-bg-color: #fefefd;

  --theme-text-primary-color: #22211d;
  --theme-text-danger-color: #c91024;
  --theme-text-muted-color: #6b6960;

  --theme-link-primary-color: #c91024;
  --theme-link-primary-color-hover: #8d0614;

  --theme-navbar-link-color: #22211d;
  --theme-navbar-link-color-hover: #22211d;
  --theme-navbar-search-color: #22211d;
  --theme-navbar-search-border-color: #b9b7ac;
  --theme-navbar-search-border-color-hover: #4e4d47;

  --theme-navbar-toggler-color: rgba(107, 105, 96, 0.55);
  --theme-navbar-toggler-color-focus: rgba(107, 105, 96, 0.55);

  --theme-navbar-dropdown-menu-bg-color: #fefefd;
  --theme-navbar-dropdown-item-color: #22211d;
  --theme-navbar-dropdown-item-color-hover: #22211d;
  --theme-navbar-dropdown-item-bg-color-hover:rgba(185,183,172,.12);

  --theme-tag-bg-color: #ebebe5;
  --theme-tag-bg-color-hover: #dadad2;
  --theme-tag-text-color: #4e4d47;

  --theme-btn-edit-bg-color: transparent;
  --theme-btn-edit-bg-color-hover: rgba(185,183,172,.12);
  
  --theme-btn-danger-color: #fff;
  --theme-btn-danger-bg-color: #c91024;
  --theme-btn-danger-color-hover: #fff;
  --theme-btn-danger-bg-color-hover: #22211d;
  --theme-btn-danger-border-color-hover: #22211d;

  --theme-btn-primary-color: #fff;
  --theme-btn-primary-bg-color: #c91024;
  --theme-btn-primary-color-hover: #fff;
  --theme-btn-primary-bg-color-hover: #22211d;
  --theme-btn-primary-border-color-hover: #22211d;

  --theme-btn-secondary-color: #4e4d47;
  --theme-btn-secondary-bg-color: #ebebe5;
  --theme-btn-secondary-color-hover: #4e4d47;
  --theme-btn-secondary-bg-color-hover: #dadad2;
  --theme-btn-secondary-border-color-hover: #dadad2;

  --theme-dropdown-menu-bg-color: #fefefd;
  --theme-dropdown-item-color-hover: #22211d;
  --theme-dropdown-item-bg-color-hover: rgba(185,183,172,.12);

  --theme-form-input-border-color: #b9b7ac;
  --theme-form-input-border-color-focus: #4e4d47;

  --theme-form-check-border-color: #b9b7ac;
  --theme-form-check-border-color-focus: #4e4d47;
  --theme-form-check-border-color-checked: #c91024;
  --theme-form-check-bg-color-checked: #c91024;

  --theme-alert-danger-color: #fefefd;
  --theme-alert-danger-bg-color: #c91024;
  --theme-alert-danger-border-color: #c91024;

  --theme-alert-success-color: #fefefd;
  --theme-alert-success-bg-color: #12bc00;
  --theme-alert-success-border-color: #12bc00;

  --theme-mark-bg-color: hsla(51, 97%, 75%, 1.0);
  --theme-mark-color: black;
}

html * {
  font-family: 'Roboto Slab', serif !important;
}

* {
  border-radius: 2px !important;
}

.theme--rounded {
  border-radius: 2px !important;
}

body {
  background-color: var(--theme-body-bg-color);

  color: var(--theme-text-primary-color) !important;
}

/* Mandatory field (asterisk) */
.theme--mandatory {
  color: var(--theme-text-danger-color);
  font-weight: bolder;
}

.theme--bookmark-bg {
  background-color: var(--theme-bookmark-bg-color) !important;
}

.theme--bookmark-shadow {
  box-shadow: 0 0 1px 0 rgba(0,0,0,.16),0 0 1px 0 rgba(0,0,0,.08);
  transition: box-shadow .2s ease-in-out;
}

.theme--bookmark-shadow:hover {
  box-shadow: 0 0 10px 0 rgba(0,0,0,.16),0 0 10px 0 rgba(0,0,0,.08);
}

.theme--footer-bg {
  background-color: var(--theme-footer-bg-color) !important;
}

.theme--navbar-bg {
  background-color: var(--theme-navbar-bg-color) !important;
}

.theme--navbar-shadow {
  box-shadow: 0px 5px 5px rgba(0,0,0,.16) !important;
}

.theme--navbar-brand,
.theme--navbar-link {
  color: var(--theme-navbar-link-color);
  transition: all .3s ease 0s;
  font-weight: bolder;
  padding-left: .5rem !important;
  padding-right: .5rem !important;
  margin: .2rem !important;
  border-radius: 0 !important;
}

.theme--navbar-brand:hover,
.theme--navbar-brand:focus,
.theme--navbar-link:hover,
.theme--navbar-link:focus {
  color: var(--theme-navbar-link-color-hover);
  background-color: rgba(185,183,172,.12);
  font-weight: bolder;
  border-radius: 2px !important;
}

.theme--navbar-brand.active,
.theme--navbar-link.active {
  background-color: var(--theme-text-danger-color);
  color: var(--theme-bookmark-bg-color);
  font-weight: bolder;
}

.theme--navbar-search {
  background-color: transparent !important;
  color: var(--theme-navbar-search-color) !important;
  border-color: var(--theme-navbar-search-border-color) !important;
  transition: all .3s ease 0s;
}

.theme--navbar-search:hover,
.theme--navbar-search:focus {
  background-color: transparent !important;
  border-color: var(--theme-navbar-search-border-color-hover) !important;
}

.navbar-toggler {
  color: var(--theme-navbar-toggler-color);
  border-color: var(--theme-navbar-toggler-color-focus);
}

.navbar-toggler:focus {
  box-shadow: none;
}
.navbar-toggler:hover {
  box-shadow: 0 0 0 0.25rem;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28107, 105, 96, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.theme--text-primary {
  color: var(--theme-text-primary-color) !important;
}

.theme--text-muted {
  color: var(--theme-text-muted-color) !important;
}

.theme--text-danger {
  color: var(--theme-text-danger-color) !important;
}

.theme--link-primary {
  color: var(--theme-link-primary-color);
  transition: all .3s ease 0s;
}

.theme--link-primary:hover,
.theme--link-primary:focus {
  color: var(--theme-link-primary-color-hover);
}

.theme--tag {
  vertical-align: middle;
  border-radius: 2px !important;
}

.theme--tag-sm {
  font-size: 0.7em;
}

.theme--tag-bg {
  background-color: var(--theme-tag-bg-color) !important;
  transition: .3s;
}

.theme--tag-bg:hover {
  background-color: var(--theme-tag-bg-color-hover) !important;
}

.theme--tag-text {
  color: var(--theme-tag-text-color) !important;
}

.theme--btn-edit {
  vertical-align: middle;
  border-radius: 2px !important;
}

.theme--btn-edit-bg {
  background-color: var(--theme-btn-edit-bg-color) !important;
  transition: .3s;
}
.theme--btn-edit-bg:hover {
  background-color: var(--theme-btn-edit-bg-color-hover) !important;
}

.theme--btn-edit-text {
  color: var(--theme-text-primary-color) !important;
}

.page-link {
  color: var(--theme-text-primary-color);
  background-color: transparent;
  border: 1px solid transparent;
  font-weight: bold;
  border-radius: 0 !important;
  margin: 0.5rem;
}

/* https://getbootstrap.com/docs/5.0/layout/breakpoints/#media-queries */
@media ( max-width: 575.98px ) {
  .page-link {
    margin-left: 0;
    margin-right: 0;
  }
}

.page-link:hover,
.page-link:focus {
  color: var(--theme-text-primary-color);
  background-color: var(--theme-navbar-dropdown-item-bg-color-hover);
  border-color: transparent;
  box-shadow: none;
  border-radius: 0 !important;
}

.page-item.active .page-link {
  color: var(--theme-bookmark-bg-color);
  background-color: var(--theme-link-primary-color);
  border-color: transparent;
}

.page-item.disabled .page-link {
  color: var(--theme-text-muted-color);
  background-color: transparent;
  border-color: transparent;
}

.modal-content {
  background-color: var(--theme-bookmark-bg-color);
}

.modal-header {
  border-bottom: none;
}

.modal-body {
  color: var(--theme-text-primary-color);
}

.modal-footer {
  border-top: none;
}

.theme--btn-danger {
  color: var(--theme-btn-danger-color);
  background-color:var(--theme-btn-danger-bg-color);
  border-color: var(--theme-btn-danger-bg-color);
}

.theme--btn-danger:hover,
.theme--btn-danger:focus {
  color: var(--theme-btn-danger-color-hover);
  background-color: var(--theme-btn-danger-bg-color-hover);
  border-color: var(--theme-btn-danger-border-color-hover);
  box-shadow: none;
}

.theme--btn-primary {
  color: var(--theme-btn-primary-color);
  background-color:var(--theme-btn-primary-bg-color);
  border-color: var(--theme-btn-primary-bg-color);
}
.theme--btn-primary:hover,
.theme--btn-primary:focus {
  color: var(--theme-btn-primary-color-hover);
  background-color: var(--theme-btn-primary-bg-color-hover);
  border-color: var(--theme-btn-primary-border-color-hover);
  box-shadow: none;
}

.theme--btn-secondary {
  color: var(--theme-btn-secondary-color);
  background-color:var(--theme-btn-secondary-bg-color);
  border-color: var(--theme-btn-secondary-bg-color);
}

.theme--btn-secondary:hover,
.theme--btn-secondary:focus {
  color: var(--theme-btn-secondary-color-hover);
  background-color: var(--theme-btn-secondary-bg-color-hover);
  border-color: var(--theme-btn-secondary-border-color-hover);
  box-shadow: none;
}

.theme--navbar-dropdown-menu {
  background-color: var(--theme-navbar-dropdown-menu-bg-color);
  border-color: rgba(0, 0, 0, 0.15);
}
.theme--navbar-dropdown-item {
  color: var(--theme-navbar-dropdown-item-color);
}
.theme--navbar-dropdown-item:hover,
.theme--navbar-dropdown-item:focus {
  color: var(--theme-navbar-dropdown-item-color-hover);
  background-color: var(--theme-navbar-dropdown-item-bg-color-hover);
}

.theme--dropdown-menu {
  color: var(--theme-text-primary-color);
  background-color: var(--theme-dropdown-menu-bg-color);
}

.theme--dropdown-item {
  color: var(--theme-text-primary-color);
  background-color: transparent;
}
.theme--dropdown-item:hover,
.theme--dropdown-item:focus {
  color: var(--theme-dropdown-item-color-hover);
  background-color: var(--theme-dropdown-item-bg-color-hover);
}

.theme--dropdown-danger-text {
  color: var(--theme-text-danger-color) !important;
}

.theme--form-input,
.theme--form-input:hover {
  color: var(--theme-text-primary-color);
  background-color: transparent;
  border-color: var(--theme-form-input-border-color);
}

.theme--form-input:focus {
  color: var(--theme-text-primary-color);
  background-color: transparent;
  border-color: var(--theme-form-input-border-color-focus);
}

.theme--form-check-input {
  background-color: transparent;
  border-color: var(--theme-form-check-border-color);
  outline: 0;
  cursor: pointer;
  transition: .2s;
}

.theme--form-check-input:focus {
  border-color: var(--theme-form-check-border-color-focus);
}

.theme--form-check-input:checked {
  background-color: var(--theme-form-check-bg-color-checked);
  border-color: var(--theme-form-check-border-color-checked);
}

/* Checkbox tick. Change stroke attribute to change color. */
.theme--form-check-input:checked[type=checkbox] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

.theme--alert-danger {
  color: var(--theme-alert-danger-color);
  background-color: var(--theme-alert-danger-bg-color);
  border-color: var(--theme-alert-danger-border-color);
}

.theme--alert-success {
  color: var(--theme-alert-success-color);
  background-color: var(--theme-alert-success-bg-color);
  border-color: var(--theme-alert-success-border-color);
}

.btn-close,
.btn-close:hover {
  filter: invert(100%);
  opacity: 1;
}

.mark {
  padding: 0;
  background-color: transparent;
  border-radius: 2px;
 
  animation-name:mark-anim;
  animation-fill-mode:forwards;
  animation-duration:.5s;
  animation-delay:.2s;
}

@keyframes mark-anim {
  0% {
    background-color:transparent;
    color: inherit;
  }
  100% {
    background-color:var(--theme-mark-bg-color);
    color: var(--theme-mark-color);
  }
}

.bi-star-fill,
.bi-tags-fill,
.bi-bookmark-plus-fill,
#bookmark-favicon,
#favorite-favicon {
  display: none;
}

.bi-person-circle {
  margin-top: 1px;
}

#theme-toggle::after {
  content: none;
}