@view-transition {
  navigation: auto;
}

:root {
  -webkit-font-smoothing: antialiased;
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-text-size-adjust: none;
  -webkit-touch-callout: none;
  scroll-behavior: smooth;
  --haxcms-system-bg: var(--simple-colors-default-theme-blue-grey-7, #37474f);
  --haxcms-system-action-color: var(--simple-colors-default-theme-light-blue-7, #007ffc);
  --haxcms-system-danger-color: var(--simple-colors-default-theme-red-7, #FF7777);
  --simple-modal-titlebar-color: var(--ddd-theme-default-infoLight);
  --simple-modal-z-index: 10000000;
  --simple-modal-titlebar-background: var(--ddd-theme-default-info);
  --simple-modal-border-radius: var(--ddd-radius-md);
  --simple-modal-header-color: #FFFFFF;
  --simple-modal-header-background: var(--haxcms-system-bg);
  --simple-modal-button-color: #FFFFFF;
  --haxcms-tooltip-color: #FFFFFF;
  --haxcms-tooltip-background-color: #000000;
  --github-corner-background: var(--haxcms-color, --haxcms-system-bg);
  
  /** HAX specific settings **/
  --hax-color-bg: var(--haxcms-system-bg, #37474f);
  --hax-color-border-outline: var(--haxcms-system-bg, --simple-colors-default-theme-light-blue-7);
  --hax-color-menu-heading-bg: var(--haxcms-system-bg, --simple-colors-default-theme-light-blue-7);
  --hax-color-accent-text: #FFFFFF;
  --hax-color-accent1: var(--haxcms-system-bg, --simple-colors-default-theme-light-blue-7);
  --hax-color-accent1-text: #000000;
  --hax-color-menu-heading-color: #FFFFFF;
  --hax-ink-color: var(--haxcms-system-bg, black);
  --hax-panel-padding: 8px 0 8px 80px;
  --hax-panel-item-active: #FFFFFF;
  --hax-panel-item-active-border-color: #444444;
  --hax-panel-item-border-color: #444444;
  --hax-panel-item-ink: var(--haxcms-color, white);
  --hax-panel-item-bg: #000000;
  --hax-panel-item-text: #EEEEEE;
  --hax-tray-width: 350px;
  --hax-toolbar-item-color: var(--haxcms-system-bg, black);
  --hax-export-dialog-import-button-bg: var(--haxcms-system-danger-color);

  /** simple-toast **/
  --simple-toast-z-index: 10000000;
  --simple-toast-color: light-dark(black, white);
  --simple-toast-bg: light-dark(white, black);
  --simple-toast-font-size: 16px;
  --simple-toast-margin: 0;
  --simple-toast-left: 0;
  --simple-toast-bottom: 0;
  --simple-toast-right: 0;
  --simple-toast-height: 80px;

  /** hax forms **/
  --primary-color: var(--simple-colors-default-theme-cyan-7, #3b97e3);
  --paper-input-container-focus-color: var(--haxcms-color, --haxcms-system-bg);
  --a11y-tabs-color: var(--haxcms-color, --haxcms-system-bg);
  --a11y-tabs-focus-color: var(--haxcms-color, --haxcms-system-bg);

  /** placeholder **/
  --place-holder-drag-over-border: 4px dashed var(--haxcms-color, --haxcms-system-bg);
}

simple-modal[opened] {
  z-index: var(--simple-modal-z-index) !important;
  position: fixed;
}

super-daemon {
  --simple-modal-z-index: 100000001;
  --super-daemon-width: 30vw;
}

simple-modal::part(title) {
  background-color: transparent;
  margin: 0;
  text-align: center;
  font-size: var(--ddd-font-size-s);
  color: white;
  font-family: var(--ddd-font-navigation, sans-serif);
  padding: 4px;
}
simple-modal .hax-modal-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--ddd-spacing-3);
  padding-top: var(--ddd-spacing-3);
  border-top: var(--ddd-border-xs) solid
    light-dark(
      var(--ddd-theme-default-limestoneGray),
      var(--ddd-accent-5)
    );
}
simple-modal button.hax-modal-btn {
  font-size: var(--ddd-font-size-s);
  line-height: var(--ddd-lh-120, 1.2);
  min-height: 44px;
  padding: var(--ddd-spacing-2) var(--ddd-spacing-4);
  margin: 0;
  color: var(--ddd-theme-default-white);
  background-color: var(--ddd-theme-default-skyBlue);
  border: var(--ddd-border-xs) solid var(--ddd-theme-default-navy);
  border-radius: var(--ddd-radius-sm);
  font-family: var(--ddd-font-navigation, sans-serif);
  cursor: pointer;
}
simple-modal button.hax-modal-btn.cancel {
  color: light-dark(
    var(--ddd-theme-default-coalyGray),
    var(--ddd-theme-default-white)
  );
  background-color: transparent;
  border-color: light-dark(
    var(--ddd-theme-default-limestoneGray),
    var(--ddd-accent-5)
  );
}
simple-modal button.hax-modal-btn:hover,
simple-modal button.hax-modal-btn:focus-visible {
  outline: 2px solid var(--ddd-theme-default-keystoneYellow);
  outline-offset: 2px;
  background-color: var(--ddd-theme-default-nittanyNavy);
}
simple-modal button.hax-modal-btn.cancel:hover,
simple-modal button.hax-modal-btn.cancel:focus-visible {
  background-color: light-dark(
    var(--ddd-theme-default-limestoneMaxLight),
    var(--ddd-primary-5)
  );
}

@keyframes blinkTargetHeading {
  0%   { background-color: yellow; }

  100% { background-color: transparent; }
}

:target {
  animation: blinkTargetHeading 1s ease-in-out; 
}

hax-tray {
  position: absolute;
}

@media print {
  body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

@media screen and (max-width: 800px) {
  body, html, :root {
    --hax-panel-padding: 8px 0 8px 50px;
  }
  simple-modal::part(title) {
    font-size: 12px;
    line-height: 12px;
    padding: 0px;
    font-family: var(--ddd-font-navigation, sans-serif);
  }
  simple-modal .hax-modal-actions {
    gap: var(--ddd-spacing-2);
    padding-top: var(--ddd-spacing-2);
  }
  simple-modal button.hax-modal-btn {
    font-size: var(--ddd-font-size-xs);
    min-height: 40px;
    padding: var(--ddd-spacing-2) var(--ddd-spacing-3);
    font-family: var(--ddd-font-navigation, sans-serif);
  }
}

body {
  --app-hax-accent-color: light-dark(black, white);
  --app-hax-background-color: light-dark(white, black);
}
body.dark-mode {
  --editable-table-bg-color: var(--simple-colors-default-theme-grey-8);
  --editable-table-stripe-bg-color: var(--simple-colors-default-theme-grey-9);
  --editable-table-color: var(--simple-colors-default-theme-grey-1);
  --editable-table-heading-bg-color: var(--simple-colors-default-theme-grey-7);
  --editable-table-heading-color: var(--simple-colors-default-theme-grey-1);
}

img {
  max-width: 100%;
}

haxcms-site-builder[disable-features*="breadcrumb"] .haxcms-theme-element::part(page-breadcrumb),
haxcms-site-builder[disable-features*="print"] .haxcms-theme-element::part(print-branch-btn),
haxcms-site-builder[disable-features*="rss"] .haxcms-theme-element::part(rss-btn),
haxcms-site-builder[disable-features*="git-link"] .haxcms-theme-element::part(git-corner-btn),
haxcms-site-builder[disable-features*="search"] .haxcms-theme-element::part(search-btn),
haxcms-site-builder[disable-features*="footer"] .haxcms-theme-element::part(footer),
haxcms-site-builder[disable-features*="qr-code"] .haxcms-theme-element::part(qr-code-btn),
haxcms-site-builder[disable-features*="right-col"] .haxcms-theme-element::part(right-col),
haxcms-site-builder[disable-features*="left-col"] .haxcms-theme-element::part(left-col)
{
  display: none !important;
}


/**
 *  @deprecated ELMS:LN textbook styles
 * https://github.com/haxtheweb/issues/issues/1658
 */
/* Required list template */
.textbook_box {
  display: block;
  margin: 1em 0px 2em 0px;
  padding: .5em;
  border-radius: 4px 4px 0px 0px;
}
.textbook_box h3 {
  font-size: 24px;
  font-weight: bold;
  display: block;
  float: right;
  margin-top: -25px !important;
  margin-bottom: 0px;
  margin-left: 5px;
  margin-right:0px;
  background-color: var(--simple-colors-default-theme-grey-2);
  border:2px solid;
  padding:4px 6px;
  letter-spacing:.06em;
  border-radius: 4px;
}
.textbook_box_required {
  border: var(--simple-colors-default-theme-pink-8) 2px solid;
}
.textbook_box_required h3{
  color: var(--simple-colors-default-theme-pink-8);
}
.textbook_box_required li:before{
  color: var(--simple-colors-default-theme-grey-1);
  background:  var(--simple-colors-default-theme-pink-8);
}
.textbook_box_required li:hover:before{
 font-weight:bold;
 color: var(--simple-colors-default-theme-pink-8);
 border: .3em solid  var(--simple-colors-default-theme-pink-8);
 background: var(--simple-colors-default-theme-grey-1);
}
/* Optional list color shift */
.textbook_box_optional {
  border:var(--simple-colors-default-theme-cyan-8) 2px solid;
}
.textbook_box_optional h3{
  color: var(--simple-colors-default-theme-cyan-8);
}
.textbook_box_optional li:before{
  color: var(--simple-colors-default-theme-grey-1);
  background: var(--simple-colors-default-theme-cyan-8);
}
.textbook_box_optional li:hover:before{
 font-weight:bold;
 color: var(--simple-colors-default-theme-cyan-8);
 border: .3em solid var(--simple-colors-default-theme-cyan-8);
 background: var(--simple-colors-default-theme-grey-1);
}

.textbook_box ol, div.textbook_box ul{
  counter-reset: li; /* Initiate a counter */
  list-style: none; /* Remove default numbering */
  font: 15px 'trebuchet MS', 'lucida sans';
  padding: 0px 0px 0px 14px;
  margin: 30px 20px 20px;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

.textbook_box li{
  position: relative;
  display: block;
  padding: .4em .4em .4em 2em;
  margin: .7em 0 !important;
  background: var(--simple-colors-default-theme-grey-1);
  color: var(--simple-colors-default-theme-grey-9);
  text-decoration: none;
  border-radius: .3em;
  transition: all .3s ease-out;
  font-size: 14px;
  line-height: 24px;
}

.textbook_box li:hover{
  background: var(--simple-colors-default-theme-grey-2);
}

.textbook_box li:before{
  content: counter(li);
  counter-increment: li;
  position: absolute;  
  left: -1.3em;
  top: 50%;
  margin-top: -1.3em;
  height: 2em;
  width: 2em;
  line-height: 2em;
  border: .3em solid var(--simple-colors-default-theme-grey-1);
  text-align: center;
  font-weight: bold;
  border-radius: 2em;
  transition: all .3s ease-out;
}

body.dark-mode lrndesign-sidenote {
  --simple-colors-default-theme-accent-12: light-dark(black, white); /* text */
  --simple-colors-default-theme-accent-1: light-dark(#c2e5f2, #0e2430);
  color: var(--lrndesign-sidenote-label-color, inherit);
}