/* =============================================================================
	PROOF SITE MOCKUPS
============================================================================= */
/* ==========================================================================
	Typographic Mixins
========================================================================== */
/* Turn ligatures on and off with .liga(0); or .liga($on); or .liga($off) */
/* Turn kerning on and off */
/* Hyphenation and Word Wrapping */
/* https://github.com/amazingSurge/prelude-mixins/blob/master/src/typography/hyphens.scss */
/* ==========================================================================
	Additional Mixins
========================================================================== */
/* https://github.com/amazingSurge/prelude-mixins/blob/master/src/typography/smoothing.scss */
/* value: off | antialiased | subpixel-antialiased ... example: .font-smoothing(off); */
/* ==========================================================================
	Site Mixins
========================================================================== */
@font-face {
  font-family: "MockFlow1";
  font-style: normal;
  font-weight: normal;
  src: url("/assets/fonts/MockFlow1.eot");
  src: url("/assets/fonts/MockFlow1.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/MockFlow1.woff") format("woff"), url("/assets/fonts/MockFlow1.ttf") format("truetype"), url("/assets/fonts/MockFlow1.svg#MockFlow1") format("svg");
}
[data-bs-target="#modal-debug"] {
  --bs-btn-font-size: 1.5rem;
  --bs-btn-padding-y: 1rem;
  line-height: 1;
  border-radius: 100%;
  position: fixed;
  z-index: 500;
  bottom: 15px;
  right: 15px;
}

.card-mockup {
  --color: black;
  --bs-card-cap-color: var(--color);
  --bs-headings-color: var(--color);
  --bs-card-color: var(--color);
  --bs-card-inner-border-radius: 0;
  --bs-card-border-width: 2px !important;
  --bs-border-radius-lg: 0;
  pointer-events: none;
  user-select: none;
  box-shadow: none !important;
  mix-blend-mode: luminosity;
}
.card-mockup::before, .card-mockup::after {
  display: none;
}
.card-mockup, .card-mockup * {
  font-family: "MockFlow1" !important;
  color: var(--color) !important;
}
.card-mockup > * {
  opacity: 0.2;
}
.card-mockup .title, .card-mockup .form-label {
  text-indent: 0.2em;
}
.card-mockup .form-control, .card-mockup .form-select, .card-mockup .btn {
  border-radius: 0;
  border-width: calc(var(--bs-card-border-width) * 0.75);
  border-color: var(--color);
  background: none;
}
.card-mockup .form-control:disabled, .card-mockup .form-control.disabled, .card-mockup .form-select:disabled, .card-mockup .form-select.disabled {
  --bitsy-input-bg: var(--bs-gray-500);
}
.card-mockup .form-check-input {
  background-color: var(--color);
  border-color: var(--color);
}

.page-styles .card-mockup {
  --bs-card-border-width: 4px !important;
}

.page-styles {
  background-image: var(--bs-body-img);
  background-size: 75px;
}
.page-styles .shadow-lg {
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3) !important;
}
.page-styles::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -50px;
  left: -50px;
  width: calc(100% + 50px);
  height: calc(100% + 50px);
  background: repeating-linear-gradient(#111, #111 50%, white 50%, white);
  background-size: 5px 5px;
  filter: url(#animatedNoise);
  mix-blend-mode: overlay;
  opacity: 0;
  transition: opacity 0.4s;
}
.page-styles.show-static::after {
  opacity: 0.125;
}
.page-styles .animate {
  -webkit-filter: url(#noise);
  filter: url(#noise);
}
.page-styles .paper {
  background: #fff;
  position: relative;
  overflow: hidden;
}
.page-styles .paper > * {
  position: relative;
  z-index: 1;
}
.page-styles .paper::before, .page-styles .paper::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  mix-blend-mode: multiply;
  background: white;
}
.page-styles .paper::before {
  filter: url(#speckled-paper);
  opacity: 0.6;
}
.page-styles .paper::after {
  filter: url(#paper);
  opacity: 0.45;
}
.page-styles .nav-tabs .nav-link.disabled, .page-styles .nav-tabs .nav-link:disabled {
  mix-blend-mode: luminosity;
}
.page-styles [class^=display-] {
  font-family: anisette-petite, sans-serif;
  font-weight: 300;
}
.page-styles .display-1 {
  font-family: anisette-std, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1;
}
.page-styles .bg-secondary {
  background-image: repeating-linear-gradient(-20deg, transparent 0, transparent 20px, rgba(255, 255, 255, 0.1) 20px, rgba(255, 255, 255, 0.1) 22px);
}
.page-styles .bg-secondary > .title, .page-styles .bg-secondary .container > .title {
  color: white;
  text-align: center;
}
.page-styles .masthead {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.page-styles > .window > .main > .content {
  padding: 0 !important;
}
.page-styles section .window {
  background: white;
  width: auto;
}
.page-styles .sidebar-demos .sidebar {
  width: auto;
  flex-grow: 1;
  border-radius: 7px;
  border: 1px solid var(--bs-nav-link-disabled-color);
}
.page-styles .motif-hornet {
  position: relative;
}
.page-styles .motif-hornet::before {
  content: "";
  background: url("/@shared/assets/img/logos/seal.svg") top right/100% no-repeat;
  position: absolute;
  z-index: -1;
  top: -15px;
  right: 0;
  width: 250px;
  height: 262px;
  opacity: 0.07;
  filter: grayscale(1);
  mix-blend-mode: multiply;
}
.page-styles .bd-example-window, .page-styles .bd-example-modal {
  position: relative;
  display: block;
  z-index: auto;
  overflow: visible;
  opacity: 1;
}
.page-styles .bd-example-window .modal-dialog, .page-styles .bd-example-modal .modal-dialog {
  transform: none;
  max-width: none;
}
.page-styles .bd-example-window .modal-dialog {
  margin: 0;
  max-width: none;
}
.page-styles .bd-example-window .modal-content {
  overflow: hidden;
}
.page-styles .bd-example-window .modal-footer {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}
.page-styles .bd-example-window .modal-footer > * {
  margin: 0;
}
.page-styles .bd-example-modal .modal-dialog {
  margin: 0 auto;
}
.page-styles .bd-example-modal .modal-content {
  border: none;
}

/* =============================================================================
	DARK MODE
============================================================================= */
.theme-midnight .card-mockup {
  --color: white;
}
.theme-midnight .bg-secondary {
  --bs-secondary-rgb: #212529;
  background-color: var(--bs-secondary-rgb) !important;
}
.theme-midnight .paper {
  background: #343a40;
}
.theme-midnight .paper::after {
  mix-blend-mode: color-burn;
  opacity: 0.75;
}