@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-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);

  /** vaadin **/
  --lumo-primary-text-color: var(--haxcms-system-bg, black);

  /** 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);
  --lumo-primary-text-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;
}

simple-modal::part(title) {
  background-color: transparent;
  margin: 0;
  text-align: center;
  font-size: var(--ddd-font-size-s);
  color: var(--ddd-theme-default-infoLight);
  font-family: var(--ddd-font-navigation, sans-serif);
  padding: 4px;
}
simple-modal button.hax-modal-btn {
  font-size: 30px;
  padding: 8px;
  margin: 4px;
  color: white;
  background-color: green;
  border: 4px solid black;
  border-radius: 8px;
  font-family: var(--ddd-font-navigation, sans-serif);
}
simple-modal button.hax-modal-btn.cancel {
  background-color: red;
}
simple-modal button.hax-modal-btn:hover,
simple-modal button.hax-modal-btn:focus {
  outline: 2px solid black;
  cursor: pointer;
  background-color: darkgreen;
}
simple-modal button.hax-modal-btn.cancel:hover,
simple-modal button.hax-modal-btn.cancel:focus {
  background-color: darkred;
}

@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: 18px;
    line-height: 18px;
    padding: 4px;
    font-family: var(--ddd-font-navigation, sans-serif);
  }
  simple-modal button.hax-modal-btn {
    font-size: 20px;
    padding: 4px;
    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;
}